简页言之,在 web 前端编程里面 JavaScript 通过浏览器提供的事件模型 API 和用户交互,接收用户的输入
由于用户的行为是不确定的,也就是说不知道用户什么时候发生点击、滚动这些动作。这种场景是传统的同步编程模型没法解决的,因为你不可能等用户操作完了才执行后面的代码
比如我们在 Python 里面调用接收用户输入的方法 raw_input() 后终端就会一直等待用户的输入,直到输入完成才会执行后面的代码逻辑。但是在下面这段 NodeJS 代码中,接收用户输入的方法 process.stdin.read 是在一个事件中调用的。后面的代码不会被阻塞(blocked)
55a635844547e8d0bfaabfd4bb75401d.png
事件驱动程序模型基本的实现原理基本上都是使用 事件循环(Event Loop),这部分内容涉及浏览器事件模型、回调原理,有兴趣的去看链接里面的视频学习下
需要说明的是在客户端 JavaScript 中像 setTimeout, XMLHTTPRequest 这类 API 并不是JavaScript 语言本身就有的。而是 JavaScript 的宿主环境(在客户端 JavaScript 中就是浏览器),同样像 DOM、BOM、Event API 都是浏览器提供的
事件绑定的方法
DOM 元素行内绑定
直接在 DOM 元素上通过设置 on + eventType 来绑定事件处理程序
这种绑定方法是最原始的,有两个缺点:
1 事件处理程序和 HTML 结构混杂在一起
早期在结构、样式、表现分离的时代很忌讳这一点。现在看来在很多 MVX 框架中将事件绑定和 DOM 结构放在一起处理,这样似乎更方便维护(不用来回切换 HTML,JavaScript 文件),而且也符合可预见(predictable)性的规则
2 命名空间冲突
因为 onclick 中的 JavaScript 代码片段执行环境是全局作用域。然而在 JavaScript 语言中并没有相关的命名空间特性。所以就很容易造成命名空间的冲突,非要用这种方法绑定事件的话只能用对象来做一些封装
一种:var show = {}
show.pro = {}
show.pro.create = function(){
alert('1')
}
另一种:
var create = function(){
alert('1')
}
show.pro.create()和create()结果是一样的。
但为什么有第一种写法?
第一种写法的作用是:
1、加前缀可以作为一个命名空间防止跟其他同名函数冲突。
2、可以把函数进行分类,方便管理,比如show可以作为一个命名空间,pro下面还可以有 pro.del 、 pro.update
欢迎大家补充
估计你用的JS不是自己写的吧,函数命名冲突了,网上找JS的话这个问题经常遇到。 简单的修改方法就是检查JS中function add()和var add="" 中的“add”的名字,有冲突的就换掉。