初步理解JS中的事件

时间 2019-12-08

标签初步理解事件栏目 JavaScript 繁體版

原文原文链接

事件

什么是事件

JavaScript与HTML之间的交互是经过事件来实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。简单来讲，事件就是浏览器告知JavaScript程序用户的行为。数组

事件属性

HTML的元素属性

在HTML的元素中能够直接添加事件的属性,这种方法虽然简单，可是耦合度高，没有作到JavaScript和HTML的有效分离。并且只能做用在当前元素。
示例代码以下：浏览器

<body>
<button onclick='sclick'>按钮</button>//在HTML元素后添加属性元素，属性值为函数名。
<script>
/*设置事件的处理函数*/
function sclick(){
    console .log('这里竟然是个按钮')；
}
</script>
</body>

DOM事件属性

在DOM的的对象，也能够直接设置事件属性。这种方法能够绑定多个元素，而且耦合度较低。
示例代码以下：函数

<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
var btn1 = document.getElementByTagNmae（'button'）[0];//定位元素的位置，添加元素的调用值。
/*为元素设置鼠标绑定事件*/
btn1.onclick = function(){
      console .log（这是竟然是按钮1）；
}；
/*为多个元素设置鼠标绑定事件*/
var btn = document.getElementByTagNmae（'button'）；
/*遍历数组，获取数组中的每个元素*/
for (var WZ=0;WZ<btn.length;WZ++){
    var bt = btn[WZ];
    bt.onclick = function(){
    console .log('这些都是按钮')；
    }
}
</script>
</body>

事件监听器

在DOM对象中，提供了addEventListener（）方法，被称为添加事件监听器，同时也能够设置事件属性。该方法存在着浏览器的兼容问题。IE8如下的版本不支持。
示例代码以下：code

<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>//指定元素的位置
var btn1 = document.getElementsByTagNmae（'button'）[0];//定位元素的位置，添加元素的调用值。
//事件属性没有‘on’
btn1.addEventListener('click',function(){
    console .log('这里竟然是个按钮')；
})；
/*多个相同元素绑定相同事件*/
var btn2 = docunment.getElementsByTagName('button');
for (var WZ = 0;WZ<btn2.length;WZ++){
     var btn = btn2(WZ);
     btn.addEventListener('click',function(){
     console .log('这里是一堆按钮')；
     })；
}
</script>
</body>

在IE8如下版本的浏览器中，不支持addEventLisner（）的方法，可是提供了attachEvent（）的方法。
示例代码以下：对象

<body>
<button>按钮</button>
<script>
var btn1 = document.getElementByTagNmae（'button'）[0];//定位元素的位置，添加元素的调用值。btn1.attachEvent('onclick',function(){
     console .log('IE真特么麻烦')；
})；
</script>
</body>