码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-02-15 01:05:48      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:运行   修改   兼容   clientx   inner   用户   执行   代码   win   

- 事件,是文档或浏览器窗口中发生的一些特定的交互瞬间,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>

 

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

标签:运行   修改   兼容   clientx   inner   用户   执行   代码   win   

原文地址:https://www.cnblogs.com/yuan233/p/10381317.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!