JavaScript-事件

事件

事件的绑定方式

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>