博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript学习二:事件
阅读量:6153 次
发布时间:2019-06-21

本文共 1697 字,大约阅读时间需要 5 分钟。

【1】http://www.cnblogs.com/hh54188/archive/2012/02/08/2343357.html

【2】http://www.cnblogs.com/hh54188/archive/2012/02/17/2355658.html

1. 冒泡和捕获

2. 绑定机制

(1)行内事件绑定模型 inline event registration model

行内事件绑定模型的缺陷: javascript脚本与HTML标签混在一起,而且如果页面上有不止一个超链接需要同样的处理函数,需要写很多遍,在重复的同时也给维护带来了困难。

http://www.digital-web.com/articles/separating_behavior_and_structure_2/

或者


 默认行为 default action

有默认行为的元素有:超链接,onload, unload(?浏览器事件响应)

当我们点击超链接时,他会首先触发doSomething(),然后转到google。

阻止默认行为

无法阻止的默认行为:unload

  • 使用返回值false阻止默认行为,这种情况下他会触发doSomething(),但是不会跳转到google
  • W3C: preventDefault()

【2】中提高更改window.status,使用Chrome/Firefox/IE10没有更改,网上有人说是出于安全性考虑。


  (2)传统事件绑定模型(【2】中的说法)

优点: 跨浏览器绑定事件的唯一方式

局限性:只能绑定一个函数,确切的说添加和删除绑定的多个函数的时候比较复杂(【2】)

element.onclick = doSomething;  
          hello    hello    hello    welcome      

 【2】中提到“事件名称”必须是小写;赋值的函数doSomething不带括号。

赋值的函数带括号

element.onclick = doSomething(); //将doSomething()函数执行的结果赋值给whatever, 在执行这条赋值语句的时候,doSomething()被执行

赋值的函数不带括号

element.onclick = doSomething;  //将doSomething函数绑定在onclick上,当onclick事件发生时,doSomething()被执行


(3.1)W3C事件绑定 

优点:可以绑定任意数量的处理函数

缺点:无法找出某个元素绑定的函数(DOM Level 3中有,但是还没有被浏览器支持)

使用addEventListener()绑定函数,三个参数分别为:

  • 事件类型eventType,可以是click, mouseout, mouseover等
  • 需要执行的函数doSomething
  • 布尔值boolean,true 或 false,表示处理函数在事件捕获阶段还是冒泡阶段执行,false表示冒泡阶段执行,true表示捕获阶段执行
element.addEventListener(eventType, doSomething, boolean);

 

            click1      

 疑问:addEventListener不会阻止默认行为?(学习完后回来)

 (3.2)微软事件绑定 【2】

如果和W3C模型比较,微软模型有两个严重的缺陷:

  1. 事件总是冒泡的,没有捕获的可能性
  2. 处理函数总是被引用,而非复制。所以其中的this关键字总是指向window,一点用都没有。

使用attachEvent绑定函数:

element.attachEvent('click', doSomething);

 

移除绑定使用:

element.detachEvent('click', doSomething)

  

转载于:https://www.cnblogs.com/linne/p/3251343.html

你可能感兴趣的文章
java学习:jdbc连接示例
查看>>
PHP执行批量mysql语句
查看>>
Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块
查看>>
Silverlight 如何手动打包xap
查看>>
建筑电气暖通给排水协作流程
查看>>
JavaScript面向对象编程深入分析(2)
查看>>
linux 编码转换
查看>>
POJ-2287 Tian Ji -- The Horse Racing 贪心规则在动态规划中的应用 Or 纯贪心
查看>>
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月7日-1月14日)
查看>>
关于C#导出 文本文件
查看>>
使用native 查询时,对特殊字符的处理。
查看>>
maclean liu的oracle学习经历--长篇连载
查看>>
ECSHOP调用指定分类的文章列表
查看>>
分享:动态库的链接和链接选项-L,-rpath-link,-rpath
查看>>
Javascript一些小细节
查看>>
禁用ViewState
查看>>
Android图片压缩(质量压缩和尺寸压缩)
查看>>
nilfs (a continuent snapshot file system) used with PostgreSQL
查看>>
【SICP练习】150 练习4.6
查看>>
HTTP缓存应用
查看>>