JS高级

事件——

  浏览器客户端上客户触发的行为都称为事件

  所有事件都是天生自带的,不需要我们去绑定,只需要我们去触发,通过obj.事件名=function(){ }

  事件名:onmousemove;onmouseup;onmousedown;等等

  当用户触发一个事件时,浏览器所有详细信息都存在一个叫event的对象身上;我们把它叫事件对象

  所有的事件在绑定方法的时候,天生自带一个参数叫Event

鼠标的坐标:

  event.clientX  event.clientY

event的兼容性:

  在Chrome(谷歌)下event是undefined

  在IE低版本(7,8,9)下event是null

  在火狐下event会报错

    document.onclick=function(ev){

      var   ev=ev||windo.event  

    }

事件冒泡:

  定义:

    当父子元素的同一事件绑定方法时,触发了子元素身上的事件,执行完毕之后,也会触发父级元素的相同事件,这种传播机制叫事件冒泡

取消事件冒泡:

  event对象有个属性叫 cancelBubble,默认值是false;改成true就取消了;

事件捕获:

  给一个元素绑定事件;普通写法——

      obj.onclick=function(){}

      obj.onclick=function(){}  相当于给obj的onclick属性赋值

      缺点:会覆盖

  事件绑定的第二种写法——

      标准浏览器:addEventListener

      IE低版本:attachEvent

  addEventListener(参数1;参数2;参数3)

    参数1:事件名,事件名不能带 “ on ”

    参数2:事件函数

    参数3:布尔值;代表捕获不捕获,默认为false,不捕获但是冒泡

  定义:

    IE低版本没有捕获;

    普通事件绑定写法没有捕获(因为会覆盖)

    给父元素用addEventListener()绑定同一事件时,当触发子元素身上的事件时,先触发父元素,然后在传递给子元素,这种传播机制叫事件捕获

  addEventListener() 和 attachEvent()二者区别:

    1,attachEvent()只用在IE8 以下;addEventListener()适合标准浏览器

    2,attachEvent()事件名带 “ on ”;addEventListener()事件名不带 “ on ”

    3,attachEvent()函数里面的this是window;addEventListener()函数里面的this是触发该事件的函数(当前元素对象)

    4,attachEvent()只用冒泡,没有捕获;addEventListener()可有冒泡,可有捕获

call()和apply():

  改变函数内部的this指向,的方法

  xxx.call()或 xxx.apply()  xxx必须是function(普通函数;类;构造函数)

  call()中的第一个参数是null的时候,函数里面的this还是指向原来的,不变

  var obj={

name:"志伟"

}

function fn(){

console.log(this.name)

}

*所有的事件都是异步的

  

事件绑定+call apply指向的更多相关文章

  1. IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

    IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...

  2. jQuery使用(七):事件绑定与取消,及自定事件的实现原理

    实例方法: on() one() off() trigger() hover() 一.绑定事件与jQuery事件委托 $(selector).eventType(fn); $(selector).on ...

  3. Vue - 事件绑定

    1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...

  4. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  5. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

  6. JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数

    下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...

  7. Javascript 事件对象(四)一个事件绑定多个不同的函数

    给一个对象绑定多个事件处理函数: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-T ...

  8. js 事件绑定

    事件绑定的方式 1.  DOM  元素行内绑定 <div onclick="alert(1)"></div>   2. js on+eventType do ...

  9. dojo事件驱动编程之事件绑定

    什么是事件驱动? 事件驱动编程是以事件为第一驱动的编程模型,模块被动等待通知(notification),行为取决于外来的突发事件,是事件驱动的,符合事件驱动式编程(Event-Driven Prog ...

随机推荐

  1. 修改opencart extension插件代码后无法重新安装的解决办法

    有时我们在为opencart安装一些插件后,发现有些地方需要细微的调整,然后去修改插件代码重新安装,但是却没有成功.开始有点怀疑是不是不能修改代码,但也不至于啊,不然开发者怎么制作插件.应该是哪里出了 ...

  2. Kdevelop的安装-2种方法

    使用 Ubuntu 的自带的源: sudo apt-get update sudo apt-get install kdevelop 这就可以了.update这部,假如不换源,更新非常慢.换源方法很简 ...

  3. mysql 之编码配置、引擎介绍、字段操作、数据类型及约束条件

    数据库的配置 # 通过配置文件统一配置的目的: 统一管理 服务端(mysqld) 客户端(client) 配置了mysqld(服务端)的编码为utf8, 那么再创建的数据库,默认编码都采用utf8. ...

  4. 【Linux】Windows终端远程链接Linux服务器

    一.Windows cmd ssh链接 1.控制面板->程序->启用Telnet客户端 2.输入命令链接 cmd中输入 ssh 账号名@服务器ip地址:端口号 例如: ssh root@1 ...

  5. limits the number of elements in an IN predicate to 2100 entries.

    org.hibernate.engine.jdbc.spi.SqlExceptionHelper 131 - [TxId : f68db5f5b-qmgnc^1561639897640^271530 ...

  6. postfix发邮件失败,日志和postqueue -p提示Connection refused

    1. postfix服务未启动 2. /etc/postfix/main.cf文件中未设置inet_interfaces = all

  7. ZROI 暑期高端峰会 A班 Day5 杂题选讲

    CF469E \(n\) 个需要表示的数,请使用最少的 \(2^k\) 或 \(-2^k\) 表示出所有需要表示的数.输出方案. \(n\le 10^5,|a_i|\le 10^5\). 首先每个数肯 ...

  8. RNN循环神经网络实现预测比特币价格过程详解

    http://c.biancheng.net/view/1950.html 本节将介绍如何利用 RNN 预测未来的比特币价格. 核心思想是过去观察到的价格时间序列为未来价格提供了一个很好的预估器.给定 ...

  9. SQL之存储过程详细介绍及语法(转)

    1:定义 存储过程(stored procedure)是一组为了完成特定功能的SQL语句集合,经编译后存储在服务器端的数据库中,利用存储过程可以加速SQL语句的执行. 存储过程分为系统存储过程和自定义 ...

  10. 《Linux就该这么学》培训笔记_ch12_使用Samba或NFS实现文件共享

    <Linux就该这么学>培训笔记_ch12_使用Samba或NFS实现文件共享 文章最后会post上书本的笔记照片. 文章主要内容: SAMBA文件共享服务 配置共享资源 Windows挂 ...