本文介绍了事件传播方式（冒泡与捕获）、多种事件注册方法（原生JS与jQuery）、常见事件类型（如鼠标、键盘事件等），并探讨了自定义事件的实现原理。
一、事件传播方式
他们是描述事件触发时序问题的术语，绑定事件方法(事件委托：addEventListener)的第三个参数，就是控制事件触发顺序的类型。true=事件捕获，false=事件冒泡。默认false,即事件冒泡
1. 冒泡
是自下而上的去触发事件,addEventListener(,,false)：第三个参数为false。
2. 捕捉
是从document到触发事件的那个节点，即自上而下的去触发事件。addEventListener(,,true)：第三个参数为true。
二、注册事件方法：
1. JavaScript原生方式
<body>
<button id="btn" onclick="btnClick()/*内嵌HTML方式*/">点击事件</button>
<script>
/*DOM0 1.0 内嵌HTML方式*/
function btnClick() {
alert("单击事件");
} //内嵌方法不推荐使用，好的编程风格应当保持HTML和js代码行为分离
var btn = document.getElementById('btn');
/*DOM0 2.0 当做button对象的方法调用方式*/
btn.onclick = function () {
alert("单击事件");
};
//DOM2 3.0 标准事件模型
var callback = function () {
alert("单击事件发生");
};
btn.addEventListener('click',callback,false);
</script>
</body>2. JQuery方式
1. $('#btn').click(callback);
2. $('#btn').bind('click',callback);3. 鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style>
#clickInfo{
position: absolute;min-width: 50px; min-height: 70px;display: none; background-color: #000FFF;color: white; box-shadow: 2px 2px 2px rgba(120,159,102,0.73);
}
</style>
</head>
<body>
<div id="btn" onclick="btnOnclick()">事件</div>
<div id="clickInfo">自定义邮件菜单</div>
</body>
<script src="../js/jquery-3.2.1.js"></script>
<script>
// 内嵌事件
function btnOnclick() {
alert('内嵌点击事件');
}
//给对象进行事件监听
var btn = document.getElementById('btn');
btn.addEventListener('click',function () {
alert('addEventListener点击事件');
});
//对象的onclick属性
btn.onclick = function () {
alert('onclick属性点击事件');
};
//jQuery的click事件函数
$('#btn').click(function () {
alert('jq click事件');
});
//jQuery给对象绑定事件click
$('#btn').bind('click',function () {
alert('jq bind click事件');
});
//鼠标事件分类
var btn = document.getElementById('btn');
btn.onmousedown = function(e){
if(e.button == 2)
alert('右键');
else if(e.button == 1)
alert('中间');
else if(e.button == 0)
alert('左键');
else
alert('未知 = ' + e.button);
};
//自定义邮件菜单
document.oncontextmenu=function(e){
//自定义右键菜单(div)
var left = e.offsetX;
var top = e.offsetY;
if($('#clickInfo').css('display') == 'none')
$('#clickInfo').css('display','block');
else
$('#clickInfo').css('display','none');
$('#clickInfo').css('left',parseInt(left)+10+'px');
$('#clickInfo').css('top',parseInt(top)+10+'px');
return false; //去掉默认的邮件菜单
};
</script>
</html>
4. 滚动条事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动条事件</title>
<style>
#btn{
position: fixed;
bottom: 130px;
right: 30px;
display: none;
width: 70px;
height: 70px;
border: none;
box-shadow: 1px 6px 1px #888888;
background-color: green;
color: white;
outline: none;
font-size: 1.5em;
}
li{
text-align: center;
list-style: none;
}
#divShow{
position: fixed;
left: 46%;
top: 40%;
width: 100px;
height: 100px;
background-color: rgba(0,0,0,0.33);
text-align: center;
line-height: 100px;
display: none;
color: white;
border-radius: 100%;
font-size: 1.4em;
}
</style>
</head>
<body>
<button id="btn">回到顶部</button>
<div id="divShow"></div>
<script src="../js/jquery-3.2.1.js"></script>
<script>
//初始化页面
var li = '';
for(var i=0;i<500;i++){
li += '<li>'+'第 '+i.toString()+' 行'+'</li>';
}
document.write(li);
//回到顶部事件
var btn = document.getElementById('btn');
btn.onclick = function () {
window.scrollTo(0,0);
};
//判断向上或者向下 滚动
var a=0,b=0;
$(document).scroll(function () {
b = $(document).scrollTop();
document.title = b;
// 滚动到 距离顶部 1500 位置 显示 ‘回到顶部’ 按钮;
if(b >= 1500) {
$('#btn').css('display','block');
}else {
$('#btn').css('display','none');
}
// 交互
$('#divShow').css('display','block');
if(a<b)
$('#divShow').text('\n 向下滚动');
else
$('#divShow').text('\n 向上滚动');
a = b;
// 2000ms之后自动消失
setTimeout(function () {
$('#divShow').css('display','none');
},2000);
});
</script>
</body>
</html>5. 键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<style>
body{
text-align: center;
}
#divShow{
position: fixed;top: 37%;left: 46%; height: 100px;width: 100px;background-color:chartreuse;text-align: center; line-height: 100px; font-size: 1.5em; border-radius: 100%;display: none;
}
</style>
</head>
<body>
<div id="divShow"></div>
<div style="margin: auto;margin-top: 25%;background-color: black;color: white;width: 20%;">您尝试敲击一下键盘</div>
<script src="../js/jquery-3.2.1.js"></script>
<script>
$(document).keydown(function (e) {
var kcode = e.keyCode;
$('#divShow').css('background-color','chartreuse');
if(64 < kcode < 106 ){
var keyvalue = String.fromCharCode(e.keyCode);
$('#divShow').text(keyvalue);
}
if(kcode == 13) {
$('#divShow').text("回车登录");
$('#divShow').css('background-color','yellow');
}
$('#divShow').css('display','block');
setTimeout(function () {
$('#divShow').css('display','none');
},3000);
});
</script>
</body>
</html>6. 自定义事件---右滑
<script>
var ev = new MouseEvent('myflip', {
cancelable: true,
bubble: true,
view: window
});
document.addEventListener('myflip', function (event) {
console.log('右滑');
}, false);
var offX_DOWN = 0;
var offY_DOWN = 0;
$(document).mousedown(function (e) {
offX_DOWN = e.clientX;
offY_DOWN = e.clientY;
console.log('\n 前：'+'('+offX_DOWN+' , '+offY_DOWN+')');
});
$(document).mouseup(function (e) {
var offX_UP = e.clientX;
var offY_UP = e.clientY;
console.log('\n 后：'+'('+offX_UP+' , '+offY_UP+')');
var a = parseInt(offX_UP) - parseInt(offX_DOWN);
var b = parseInt(offY_UP) - parseInt(offY_DOWN);
console.log('\n（a,b）= '+'('+a+' , '+b+')');
if(b >5){
//触发 右滑 的自定义事件
document.dispatchEvent(ev);
}
});
</script>
关于自定义事件，本来还在纠结 一条原生事件从物理层鼠标到一个网页的定义过程？有些钻牛角尖！后来研究了一点安卓系统之后就满足了。
举个例子：我们现在是在一个安卓手机打开谷歌浏览器访问一个网页，点击了一个按钮，由此引发一个点击事件：
1. 物理层-手机屏幕上的传感器：感知了一个按压状态
2. Android系统（触摸）驱动：把这个按压状态定义成 一组二进制码值，并把它转译成Android Linux内核的码值（scancode）。
3. Android系统接收到scancode之后，又把它转成Android系统能识别的keycode，然后在framework层针对这个keycode写一个广播分发出去，到这里写过Android apk的同学就能理解了，他在写APK的时候可以不用Android SDK提供的事件类型，可以直接通过特定的API 获取到这个点击事件的keycode或者对应的广播消息，然后写相关的响应函数。
4. 我们Android手机上的谷歌浏览器也是一个APK。所以到这里这个点击事件就这样传到了浏览器。通过浏览器APK的再一次转义或者里边的webkit直接在Android底层获取到了点击事件的信息码值。然后它再一次转译成标准的的W3C事件“名称”。这样在最上层统一形成了W3C DOM标准之后，开发者便能统一使用了。
所以对于web开发者来说，就无需关心原生的事件如何产生了。只需要知道浏览器转义后的最后一层，W3C 的DOM事件标准即可，它对应的就是浏览器能支持的“最原生”事件了！
自定义事件不是让开发者去自定义“原生”事件，那是浏览器和webkit要做的事情（当然浏览器定义的事件也不是最“原生”事件，因为它也是接收来自系统层的事件，并转换，自定义成自己的事件）。
所以自定义事件是让开发者在W3C 标准“原生”事件的基础上进行组合逻辑，封装成更加简单的事件。《JavaScript 高级程序设计》第三版书中P13也有描述：自定义事件不是由DOM原生触发的。
7. event对象
在遵循 W3C 规范的浏览器中，event 对象通过事件处理函数的参数传入。
语法：
elementObject.OnXXX=function(e){
var eve=e; // 声明一个变量来接收 event 对象
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
