JS中的事件(对象，冒泡，委托，绑定)

Posted 2021-02-09 袁233

- 事件，是文档或浏览器窗口中发生的一些特定的交互瞬间，JS与html之间的交互是通过事件实现的

  对于web应用来说，有下面这些代表性事件：点击事件，鼠标移动，按下键盘等等

- 事件，是用户和浏览器之间的交互行为

   我们可以在事件对应的属性中设置一些js代码，当事件被触发时，这些代码会执行

文档的加载：

浏览器在加载一个页面时，是按照自上而下的顺序加载的，

读取到一行就运行一行，在代码执行时，页面还没有加载

将js代码编写到页面的下面，确保页面加载完毕以后再执行js代码

window.onload 确保页面加载完成以后执行，可以保证代码执行时所有DOM对象已经加载完毕了

clientWidth／clientHeight：

- 可以获取元素的可见宽度和高度

- 这些属性都是不带px的，返回都是一个数字，可以直接进行计算

- 会获取元素宽度和高度，包括内容区和那边距

- 这些属性都是只读的，不能修改

 

事件对象：

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实參传递进响应函数

  在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个按键被按下

 <div id="areaDiv">
 </div>
 <br>
 <br>
 <div id="showMsg">
 </div>
 <script>
  /**
   * 当鼠标在areaDiv中移动时，在showMsg来显示鼠标的坐标
   onmousemove
   - 该事件将会在鼠标在元素中移动时被触发
   */
   var area=document.getElementById(‘areaDiv‘)
   var show=document.getElementById(‘showMsg‘)
if(!event){
event=window.event}//event=event||window.event
   area.onmousemove=function(event){
/**
 * clientX可以获取鼠标指针的水平坐标
 clientY可以获取鼠标的垂直坐标,在ie8中不兼容
 */
 show.innerHTML=‘x=‘+event.clientX+‘,Y=‘+event.clientY
   }
 </script>

??：

在ie8中，响应函数被触发时，浏览器不会传递事件对象

 在ie8及以下的浏览器中，是将事件对象作为window对象的属性保存的

 

事件冒泡：

所谓冒泡就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消

  <div id="box1">
        我是box1
        <span id=‘s1‘>我是span</span>
    </div>
    <script>
    var s1=document.getElementById(‘s1‘);
    var box1=document.getElementById(‘box1‘);
    s1.onclick=function(event){
        event=event||window.event
        alert(‘s1 here‘)
        event.cancelBubble=true
    }
    box1.onclick=function(){
        event=event||window.event
        alert(‘box1 here‘)
        event.cancelBubble=true//取消冒泡
    }
    document.body.onclick=function(){
        alert(‘body here‘)
    }
    </script>