<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>event.html</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
</head>
<body>
<button id="mybutton">click</button>
<button id="detach">detach click</button>
<div id="div"></div>
<script type="text/javascript">
// <![CDATA[
function show(str) {
$("#div").append($("<p></p>").text("" + str));
}
//DOM和JavaScript语言是2个单独的东西,浏览器事件是DOM API的一部分,而不是JavaScript的一部分。
//鼠标事件
//1. ‘mousedown’ – 鼠标设备按下一个元素的时候触发mousedown事件。
//2. ‘mouseup’ – 鼠标设备从按下的元素上弹起的时候触发mouseup事件。
//3. ‘click’ – 鼠标点击元素的时候触发click事件。
//4. ‘dblclick’ – 鼠标双击元素的时候触发dblclick事件。
//5. ‘mouseover’ – 鼠标移动到某元素上的时候触发mouseover事件。
//6. ‘mouseout’ – 鼠标从某元素离开的时候触发mouseout事件。
//7. ‘mousemove’ – 鼠标在某元素上移动但未离开的时候触发mousemove事件。
//键盘事件
//1.‘keypress’ – 按键按下的时候触发该事件。
//2.‘keydown’ – 按键按下的时候触发该事件,并且在keypress事件之前。
//3.‘keyup’ – 按键松开的时候触发该事件,在keydown和keypress事件之后。
//表单事件
//1.‘select’ – 文本字段(input, textarea等)的文本被选择的时候触发该事件。
//2.‘change’ – 控件失去input焦点的时候触发该事件(或者值被改变的时候)。
//3.‘submit’ – 表单提交的时候触发该事件。
//4.‘reset’ – 表单重置的时候触发该事件。
//5.‘focus’ – 元素获得焦点的时候触发该事件,通常来自鼠标设备或Tab导航。
//6.‘blur’ – 元素失去焦点的时候触发该事件,通常来自鼠标设备或Tab导航。
//其它事件
//1.‘load’ – 页面加载完毕(包括内容、图片、frame、object)的时候触发该事件。
//2.‘resize’ – 页面大小改变的时候触发该事件(例如浏览器缩放)。
//3.‘scroll’ – 页面滚动的时候触发该事件。
//4.‘unload’ – 从页面或frame删除所有内容的时候触发该事件(例如离开一个页面)。
//事件处理
var myElement = document.getElementById("mybutton");
//事件处理句柄:
function buttonClick() {
show("You just clicked the button!");
}
// 注册事件
addEvent(myElement, "click", buttonClick);
//W3C模型和微软模型
function addEvent(target, name, fn) {
if (target.addEventListener) {
target.addEventListener(name, fn, false);
} else if (target.attachEvent) {
target.attachEvent("on" + name, fn);
} else {
target["on" + name] = fn;
}
}
//删除事件绑定
function removeEvent(target, name, fn) {
if (target.removeEventListener) {
target.removeEventListener(name, fn, false);
} else if (target.detachEvent) {
target.detachEvent("on" + type, fn);
} else {
target["on" + name] = null;
}
}
$("#detach").click(function () {
removeEvent(myElement, "click", buttonClick);
});
//当事件发生的时候触发某个函数,该Event对象将自动在函数内可用,该对象包含了很多事件触发时候的信息,
//但IE却没有这么实现,而是自己实现的,IE浏览器是通过全局对象window下的event属性来包含这些信息
function myEventHandler(e) {
// 注意参数e
// 该函数调用的时候e是event对象(W3C实现)
// 兼容IE的代码
// 现在e就可以兼容各种浏览器了
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
// W3C实现
e.preventDefault();
} else {
// IE实现
e.returnValue = false;
}
// 防止默认行为
if (e.stopPropagation) {
// W3C实现
e.stopPropagation();
} else {
// IE实现
e.cancelBubble = true;
}
}
// ]]>
</script>
</body>
</html>
javascript event 事件处理
原创mb64708f76805f8 博主文章分类:javascript ©著作权
文章标签 javascript ViewUI html css click事件 文章分类 JavaScript 前端开发
-
java springboot监听事件和处理事件
java springboot监听事件和处理事件
spring 自定义事件 应用程序 -
Javascript:事件对象—event
JS事件对象—event
html 事件对象 加载 -
javascript捕获事件event
javascript捕获事件event 阻止事件冒泡
事件冒泡 javascript捕获事件event JavaScript -
Spring Event事件处理
Spring事件处理
自定义 线程池 Async -
JavaScript事件处理的例子:事件捕捉和冒泡 - event capture and bubble
Created Jerry Wang, last modified on Jun 0
html native 事件冒泡 事件流 html -
【JavaScript】window对象_event事件对象
1.event对象属性event对象可以获取和设置当前事件的有关信息,比如,获取发
JavaScript DOM编程 window对象 event事件对象 事件源 -
JavaScript之DOM对象(Event事件)
文章目录一、Event事件汇总二、用法案例1、serche搜索框2、onload加载3、事件绑dblclick 当用户双击某个对象时调用的事件句柄。onfocu
js javascript css jquery 程序人生 -
JavaScript事件属性event.target
我爱JavaScript
html javascript css 其他