老师问一个事件绑定的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的JS作业</title>
<script src="./JS/index.js"></script>
<link rel="stylesheet" href="./css/index.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<!-- 大盒子 -->
<div id="main" class="mian">
<!-- 导航盒子 -->
<div id="menu-box">
<!-- 导航菜单项 -->
<span class="menu-inner ative" id="btn1"><p>首页</p></span>
<span class="menu-inner" id="btn2"><p>点击看看</p></span>
<span class="menu-inner" id="btn3"><p>会自动的</p></span>
<span class="menu-inner" id="btn4"><p>我的网址</p></span>
</div>
<!-- 图片盒子 -->
<div id="image-box">
<!-- 图片项 -->
<img src="./img/1.jpg" alt="0" class="ative">
<img src="./img/3.jpg" alt="1">
<img src="./img/4.jpg" alt="2">
<img src="./img/5.jpg" alt="3">
</div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
font-family: " Microsoft YaHei";
}
/* 大盒子 */
.mian{
text-align: center;
width:840px;
height:372px;
overflow: hidden;
margin:auto;
}
/* 导航盒子 */
#menu-box{
width:840px;
height:50px;
box-shadow: 1px 1px 10px 1px rgba(221, 221, 221, 0.75) inset;
border-radius: 7px;
}
#menu-box:after{
clear: both;
}
/* 导航菜单项 */
#menu-box .menu-inner{
width: 210px;
display: inline-block;
height: 100%;
font-size: 22px;
line-height: 50px;
color: #666;
cursor: pointer;
border-radius: 7px;
float: left;
}
/* 主页打开默认为激活 */
#menu-box .ative{
background-color:#FFCC00;
color:white;
font-weight: bold;
}
/* 被调用的菜单项背景色 */
#menu-box .color{
background-color:#FFCC00;
color:white;
font-weight: bold;
}
/* 图片盒子 */
#image-box{
width:840px;
height:322px;
display: inline-block;
overflow: hidden;
position: relative;
}
/* 图片项 */
#image-box img{
position: absolute;
width:840px;
height:322px;
left:0;
display: none;
}
#image-box .ative{
display: block;
}
function myReady(fn){
//对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式
if ( document.addEventListener ) {
document.addEventListener("DOMContentLoaded", fn, false);
} else {
IEContentLoaded(fn);
}
//IE模拟DOMContentLoaded
function IEContentLoaded (fn) {
var d = window.document;
var done = false;
//只执行一次用户的回调函数init()
var init = function () {
if (!done) {
done = true;
fn();
}
};
// 立即调用的函数表达式：
(function () {
try {
// DOM树未创建完之前调用doScroll会抛出错误
d.documentElement.doScroll('left');
} catch (e) {
//延迟再试一次~
setTimeout(arguments.callee, 50);
return;
}
// 没有错误就表示DOM树创建完毕，然后立马执行用户回调
init();
})();
//监听document的加载状态
d.onreadystatechange = function() {
// 如果用户是在domReady之后绑定的函数，就立马执行
if (d.readyState == 'complete') {
d.onreadystatechange = null;
init();
}
}
}
}
myReady(function(){
var index=0;
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,true)
}else if(element.attachEvent){
element.attachEvent("on"+type,handler)
}else{
element["on"+type]=handler;
}
}
}
// 封装一个getElementById
var ebyid=function(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
// 获取每个图片标签元素
var pics=ebyid("image-box").getElementsByTagName("img")
// 获取每个菜单项元素
var menuls=ebyid("menu-box").getElementsByTagName("span")
// 遍历以取消每个图片显示
var changeImg=function(){
for(i=0;i<pics.length;i++){
pics[i].style.display="none"
menuls[i].className="menu-inner";
}
pics[index].style.display="block"
menuls[index].className="menu-inner color";
}
// 老师给的代码：
for(var j=0;j<pics.length;j++){
menuls[j].setAttribute("date-type",j);
menuls[j].onclick=function(){
index=this.getAttribute("date-type");
changeImg()
}
}
// 间歇调用
var timer=null
function starAutoplay(){
timer=setInterval(function(){
index++
if(index>pics.length-1){
index=0;
}
changeImg();
},1000)
}
starAutoplay()
var menuBox=ebyid("menu-box")
//移除定时器
EventUtil.addHandler(menuBox,"mouseover",function(){
clearInterval(timer);
})
EventUtil.addHandler(menuBox,"mouseout",function(){
starAutoplay()
})
})
正在回答
同学你好，addEventListener是dom2级绑定事件，可以直接绑定点击等触发事件。同学写的无法生效是因为事件没有加引号导致无法解析：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
老师请在js代码中搜索“老师给的代码：”找到问题对应处。前面提了相关问题这是老师给的代码。然后我查阅了前面的知识点，原来这个叫做“dom0级事件绑定”，他的坏处就是绑定多个事件的时候只执行最下边绑定的同一个事件是把？ 那么要把下面这个老师给的dom0级的定义方式改成dom2级的话要怎么改？
// 老师给的代码：
for(var j=0;j<pics.length;j++){
menuls[j].setAttribute("date-type",j);
menuls[j].onclick=function(){
index=this.getAttribute("date-type");
changeImg()
}
}
//这是我修改后老师给的dom2级事件的代码：为什么不可以执行？
for(var j=0;j<pics.length;j++){
menuls[j].setAttribute("date-type",j);
EventUtil.addHandler(menuls[j],click,function(){
index=this.getAttribute("date-type");
changeImg()
})
}
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星