JavaScript前端开发案例教程第8章 事件 教学PPT.pptVIP

8.2 事件对象 在事件发生后，事件对象event中不仅包含着与特定事件相关的信息，还会包含一些所有事件都有的属性和方法。 常用属性和方法 8.2 事件对象 常用属性和方法 分类 属性/方法 描述 公有的 type 返回当前事件的类型，如click 标准浏览器事件对象 target 返回触发此事件的元素（事件的目标节点） currentTarget 返回其事件监听器触发该事件的元素 bubbles 表示事件是否是冒泡事件类型 cancelable 表示事件是否取消默认动作 eventPhase 返回事件传播的当前阶段。1表示捕获阶段，2表示处于目标阶段，3表示冒泡阶段 stopPropagation() 阻止事件冒泡 preventDefault() 阻止默认行为 早期版本IE浏览器事件对象 srcElement 返回触发此事件的元素（事件的目标节点） cancelBubble 阻止事件冒泡，默认为false表示允许，设置true表示阻止 returnValue 阻止默认行为，默认为true表示允许，设置false表示阻止 8.2 事件对象 常用属性和方法 var btn = document.getElementById(btn); btn.onclick = function(e) { var obj = event.target || window.event.srcElement; console.log(obj.nodeName); console.log(obj.id); console.log(obj.className); console.log(obj.innerText); }; 获取触发事件的元素 8.2 事件对象 常用属性和方法 red.onclick = function() { console.log(red); }; green.onclick = function() { console.log(green); }; yellow.onclick = function() { console.log(yellow); }; 事件冒泡 8.2 事件对象 常用属性和方法 if (window.event) { // 早期IE浏览器 window.event.cancelBubble = true; } else { // 标准浏览器 e.stopPropagation(); } 阻止事件冒泡 8.2 事件对象 常用属性和方法 HTML中有些元素标签拥有一些特殊的行为。例如，单击a标签后，会自动跳转到href属性指定的URL链接；单击表单的submit按钮后，会自动将表单数据提交到指定的服务器端页面处理。因此，我们把标签具有的这种行为称为默认行为。 8.2 事件对象 常用属性和方法 a id=test href=默认链接/a script document.getElementById(test).onclick = function(e) { if (window.event) { // 早期版本IE浏览器 window.event.returnValue = false; } else { //标准浏览器 e.preventDefault(); } }; /script 禁止默认行为 8.2 事件对象 动画特效：是JavaScript的常见功能之一。 缓动的实现原理：通过定时器连续的修改当前DOM元素的某个样式值，达到一个动态的特效。 【案例】缓动的小球 8.2 事件对象 缓动动画公式： 【案例】缓动的小球 step = ( target - leader ) / 10 leader = leader + step 计算每次缓动的步长 计算下次的起始点 target表示目标点。 leader表示起始点。 step表示从起始点到目标点每次缓动的步长。而缓动特效在实现时，随着距离target越来越近，step步长值逐渐变小，从而达到非常逼真的缓动效果。 8.2 事件对象 【案例】缓动的小球 代码实现思路： 利用div设计小球，并用CSS设置小球的定位。 为小球绑定单击事件，在处理函数中调用自定义的animate()实现小球的缓动。 编写animate()动画函数，在函数中利用定时器，根据缓动公式完成缓动动画。 8.3 事件分类 思考：HTML页面是按照什么样的顺序进行加载的？ 答案：页面的加载是按照代码的编写顺序，从上到下依次执行的。 会出现的问题：若在页面还未加载完成的情况下，就使用JavaScript操作DOM元素，会出现语法错误。 页面事件 8.3 事件分类 页面事件 scri