事件
事件的绑定方式
1.事件可以在行内绑定
<button onclick="alert(123)">按钮1</button>
<button onclick="fn()">按钮2</button>
<script>
function fn(){
alert(456)
}
</script>
2.用on加事件名来绑定，但是缺点是不能重复绑定，否则后面的绑定事件会覆盖前面的
<body>
<button id="btn">按钮</button>
</body>
<script>
btn.onclick=function(){
console.log("第一次单击");
}
btn.onclick=function(){
console.log("第二次单击");
}
</script>
3.利用事件侦听器绑定事件addEventListener(type,handle,false);
- type参数是用写需要绑定的事件类型
- handle参数用来处理事件函数
- 是否在捕获阶段执行，true是在捕获阶段执行，false则是在冒泡阶段执行
用这种方法绑定事件可以对同一对象重复绑定：
<body>
<button id="btn">按钮</button>
</body>
<script>
document.getElementById("btn").addEventListener("click",handle,false);
function handle(){
console.log("第一次点击");
}
document.getElementById("btn").addEventListener("click",handle1,false);
function handle1(){
console.log("第二次点击");
}
</script>
4.低版本的IE中用attachEvent()来代替，特点是顺序注册事件，执行时是倒叙执行。
事件对象
浏览器为事件提供的一个对象，用来记录各种具体的信息。
btn.onclick = function(){
console.log(window.event);
}
另一种写法：
btn.onclick=function(e){
console.log(e);
}
阻止事件冒泡
事件对象中有一个方法来阻止事件冒泡，这个方法是：stopPropagation
<body>
<style>
#big{
width: 200px;
height: 200px;
border:1px solid #000;
}
#middle{
width: 150px;
height: 150px;
background: #abcdef;
}
#small{
width: 100px;
height: 100px;
background: red;
}
</style>
<div id="big">
大盒子的内容
<div id="middle">
中盒子的内容
<div id="small">
小盒子的内容
</div>
</div>
</div>
</body>
<script type="text/javascript">
big.onclick=function(){
console.log(this.innerText);
console.log("大盒子的内容完毕");
}
middle.onclick=function(){
console.log(this.innerText);
console.log("中盒子的内容完毕");
}
small.onclick=function(e){
var ev = e || window.event;
ev.stopPropagation();
console.log(this.innerText);
console.log("小盒子的内容完毕");
}
</script>
也有另一种写法：
ev.cancelBubble=true; # IE低版本浏览器
事件类型
e.type //事件类型
鼠标按键信息
e.button //鼠标按键信息
它有三个返回值：
- 在事件中点击鼠标左键，则它的返回值是 0
- 在事件中点击鼠标中键，则它的返回值是 1
- 在事件中点击鼠标右键，则它的返回值是 2
按键键码
e.keyCode // 键盘的键码
按键码：
- 回车键的按键码是13
- 空格键是32
- 数字和字母是它对应的阿斯克码值
组合键的判断：
-
altKey: alt 键按下得到true ，否则得到false -
shiftKey：shift 键按下得到 true，否则得到 false -
ctrlKey：ctrl 键按下得到 true，否则得到 false
document.onkeyup = function (e) {
e = e || window.event
keyCode = e.keyCode || e.which
if (e.shiftKey && keyCode === 97) {
console.log('你同时按下了 shift 和 a')
}
}
使用说明：火狐firefox2.0和低版本IE中keyCode不兼容，可以使用e.which来获取
鼠标坐标点
offsetX和offsetY
从元素内部开始计算坐标
clientX和clientY
相对于浏览器的坐标
pageX和pageY
相对于页面的坐标，会随着滚动条的滚动而加大
默认行为
具有默认行为的常见的两个标签
链接<a href="/index.php">点我</a> <!--往属性href指定的地址跳转 -->
提交按钮<input type=”submit”> <!--往form表单属性action指定的地址跳转-->
阻止默认行为的方法：
给链接设置地址为
javascript:;或javascript:void(0)在事件的最后添加
return false-
通过事件对象方法
e.preventDefault阻止，示例：function stopDefault(event) { var e = event || window.event; if (e.preventDefault){ e.preventDefault(); // w3c标准浏览器 }else{ e.returnValue = false; // IE浏览器 } }
事件委托
事件委托也叫事件代理（看站谁的角度），使用事件委托技术能避免对每个子节点添加事件监听,相反把事件监听委托给父元素即可，这样可提高绑定事件的性能。
<ul>
<li>首页</li>
<li>公司介绍</li>
<li>产品中心</li>
</ul>
<button id="btn">添加新元素</button>
<script>
var oUl = document.getElementsByTagName("ul")[0];
btn.onclick = function(){
var oNewLi = document.createElement("li");
oNewLi.innerText = "新闻中心";
oUl.appendChild(oNewLi)
}
oUl.onclick = function(e){
var ev = e || window.event;
// 获取到单击的目标元素dom对象
var target = ev.target || ev.srcElement;
// 判断是否是li标签
if(target.nodeName == "li"){
// 完成业务逻辑
alert(target.innerText);
}
}
</script>
