开端明白JS中的事宜

2023年5月16日 212次阅读 来源: 老板便宜一点呗

事宜

什么是事宜

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以下的版本不支持。
示例代码以下：

<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>
    原文作者：老板便宜一点呗
    原文地址: https://segmentfault.com/a/1190000016243612
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞