给dom元素添加事件监听一般有两种方式:
一、函数<input type="button" onclick="clickme()" id="clickme" value="点击我">
<script>
function clickme(){
alert("我被点击了")
}
</script>
二、为指定对象添加事件处理
<input type="button" onclick="clickme()" id="clickme" value="点击我">
<script>
document.getElementById("clickme").onclick=function(){
alert("hello world")
}
</script>
监听方法在js中的实现如下：function addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])eventFlag : 事件名称，如click、mouseover…eventFunc: 绑定到事件中执行的动作useCapture: 指定是否绑定在捕获阶段，true为是，false为否，默认为true在事件监听流中可以使用event.stopPropagation()来阻止事件继续往下流IE中使用自有的attachEvent函数绑定时间，函数定义如下：function attachEvent(string eventFlag, function eventFunc)eventFlag: 事件名称，但要加上on，如onclick、onmouseover…eventFunc: 绑定到事件中执行的动作在事件监听流中可以使用window.event.cacenlBubble=false来阻止事件继续往下流总结：addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])，针对ff，chrome，safari浏览器，false指冒泡阶段，默认为true，指捕获阶段。不过一般我们都用false。 attachEvent(string eventFlag, function eventFunc)，针对ie系列、还有opera浏览器，少了事件处理机制的参数，只指定事件类型（别忘了on）和触发哪个函数。在日常工作中我们经常会遇到某个变量依赖另一个变量的问题，但我们有时会像下边这样 当向上面这种情况时，其实我们想的是变量b随着变量a去变化，但事实上并非如此，我们需要去监听变量a,当a发生变化时，我们需要b随之发生变化。这时有一个比较好的处理方法，其实类似于vue的双向数据绑定原理，利用Object.defineProperty()，本身对对象的每个属性进行监听，其实就相当于给对象的每个对象设置一个setter和getter,当对对象进行操作时，我们同时激活相应的函数，在这个情境下，我们可以将本身改变的变量a作为对象中的这样一个属性或者一个属性去承载这个变量，当a发生变化时，我们可以触发set函数，这样我们把依赖a的b的表达式写在set函数中，这样就做到了完美的监听 这样就完成了真正的随之改变，就好像vue的双向绑定原理
