妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 7440|回复: 6

[问题答疑类] 妙味课堂-视频问题解答——事件委托

[复制链接]
leo 发表于 2012-4-26 10:59:16 | 显示全部楼层 |阅读模式
以下视频,是为了解答购买《妙味课堂全套JavaScript视频课程》的朋友而专门录制的。

为购买我们视频的朋友提供视频解答服务,是我们的售后服务之一;>>详情见这里

今后我们还会不断为购买视频光盘的朋友,免费提供各种服务方式~

所有在妙味课堂学习的朋友,更是可以直接来拷取所有一手资料哈~

以下就是购买视频的朋友,在看视频过程中,提出的一个问题,我们以录制视频的方式做为解答:

视频名称:妙味课堂-视频问题解答-事件委托.avi
时长:18:29
讲师:妙味课堂高级JS课程讲师:杜鹏[-前人人网JS高级工程师-]

视频:


观看视频须具备JS的一些基础知识点

视频知识点:
1. 什么是事件委托
2. 通过事件委托提高JS执行性能
3. 事件委托实例
4. event对象的事件源
5. 判断事件源对象:nodeName
6. 运用事件委托解决新添加元素的事件添加问题
7. 新浪微博的事件委托



注:请购买妙味课堂正版视频光盘的朋友直接向 QQ:2455720962 索要自己那部分的高清视频及源码资料哈~

回复

使用道具 举报

woween 发表于 2012-4-26 12:05:22 | 显示全部楼层
回复 支持 反对

使用道具 举报

woween 发表于 2012-4-26 12:41:41 | 显示全部楼层
target=ev.target||ev.srcElement
事件源
可以用if(taeget.nadeName.toLowerCase()=="li")控制范围
回复 支持 反对

使用道具 举报

houguang 发表于 2012-4-26 23:24:34 | 显示全部楼层
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function(){
        var oUl = document.getElementById('ul1');
        var oBt = document.getElementById('bt');
        var iNow = 1;
        oBt.onclick = function(){
                var oLi = document.createElement('li');
                oLi.innerHTML = 1111 * iNow;
                oUl.appendChild(oLi);
                iNow++;
                }
        oUl.onmouseover = function(ev){
                var ev = ev||window.event;
                var target = ev.target||ev.srcElement;
                if (target.nodeName.toLowerCase() == 'li'){
                        target.style.background = '#F00';
                        }
                }
        oUl.onmouseout = function(ev){
                var ev = ev||window.event;
                var target = ev.target||ev.srcElement;
                if (target.nodeName.toLowerCase() == 'li'){
                        target.style.background = '';
                        }
                }
        }
</script>
</head>

<body>
<input type="button" id="bt" value="添加"  />
<ul id="ul1" style="padding:30px; border:1px solid #000">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
</ul>
</body>
</html>
[/html]
回复 支持 反对

使用道具 举报

thilinafong 发表于 2016-12-14 15:22:14 | 显示全部楼层
<ul>
      <li>星期三</li>
      <li>星期四</li>
      <li>星期<span style="padding:10px;background:black;">2016/12/14</span>五</li>
    </ul>

当结构如上时,鼠标从span进入并不会变色。
回复 支持 反对

使用道具 举报

thilinafong 发表于 2016-12-14 15:24:13 | 显示全部楼层
相比之下,jQuery的on事件函数要强大得多。
回复 支持 反对

使用道具 举报

 楼主| leo 发表于 2016-12-19 16:13:12 | 显示全部楼层
thilinafong 发表于 2016-12-14 15:24
相比之下,jQuery的on事件函数要强大得多。

这个帖子有年头了,那年那月,jq 还没有 on 事件……
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-5-22 06:49 , Processed in 0.146909 second(s), 25 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表