事件对象
在事件处理函数里面写一个形参,系统会自动进来一个参数。
在IE浏览器系统不会不会把事件对象传到e里面,回传到window.event里面
var div = document.getElementsByTagName('div')[0];
div.onclick = function(e){
var e = e || window.event;
console.log(e);
}
事件源对象
事件源对象就是用户所点击的那个对象。当我们通过冒泡和捕获找到源对象。事件对象里有个方法可以通过冒泡和捕获的元素找到源对象。
e.target 火狐上只有这个。 e.srcElement IE上只有这个 。 在Chrome上两个都有。所以,当我们找事件源对象的时候必须要做兼容性处理
var div = document.getElementsByTagName('div')[0];
div.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
console.log(target);
}
事件委托
事件委托是一种事件代码程序,利用事件的冒泡和事件源对象进行处理。优点:1.性能:不需要循环所有的元素一个个的绑定事件;2.灵活:当有新的子元素时不需要再次绑定事件。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
<script>
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
console.log(target.innerText);
}
</script>
</html>
上述代码是当我点击每个li的时候显示li中的内容。 我们利用冒泡机制和事件源对象,在ul上面绑定事件,通过li的冒泡到ul上面,然后通过事件源对象找到相对应的li,输出其内容。JavaScript语言我个人感觉是最有意思的了,我也是一个初学者,遇到问题,喜欢在博客上分享,
也希望能帮到大家。一个初学者,有什么不足或者纰漏的话,希望在下面评论出来,相互学习,共同进步。