标签：结束 alt 布尔 box 功能 版本 scroll round logs
一、鼠标事件
<div></div> //div不是焦点元素，所以没有键盘事件<inputtype="text"/> //有键盘事件<textarea></textarea> //有键盘事件<inputtype="text"value="kaivon"tabindex="3"/> 没有tabindex的话：点击tab键如果没有的话就按照顺序找html，<textareatabindex="2"></textarea> 给html标上tabindex就会在按tab得时候找对应html的index.<buttontabindex="1">kaivon</button><selectname=""id=""tabindex="4"><optionvalue="">123</option><optionvalue="">456</option></select><inputtype="checkbox"tabindex="6"/><inputtype="radio"tabindex="5"/><inputtype="text"id="tex"/> <script>/* * select(); * 在表单元素里，选中用户输入的内容 */ window.onload=function(){var input=document.querySelector("input");var btn=document.querySelector("button");var textarea=document.querySelector("textarea"); btn.onclick=function(){//同时出现两个方法，后面会把前面的覆盖了 input.select(); //被覆盖了 textarea.select(); //把te在xtarea的所有字符串都选中};};</script></head><body><inputtype="text"/><button>点击选中文字</button><textarea></textarea></body> document.onclick=function(ev){ console.dir(ev); } /*function fn(ev){ console.log(ev); } fn(); */ //这个函数不是事件调用的，所以没有事件对象window.onload=function(){ var div=document.getElementById("div1"); document.onmousemove=function(ev){ ev是event的缩写 div.style.left=ev.clientX+‘px‘; div.style.top=ev.clientY+‘px‘; }; }; <divid="div1" style="position:absolute;"></div> 该div会跟随鼠标的位置移动 window.onload=function(){ var list=document.getElementById("list"); var lis=document.querySelectorAll("li"); /*for(var i=0;i<lis.length;i++){ lis[i].onclick=function(){ console.log(this.innerHTML); }; }*/ //事件委托（代理） list.onclick=function(ev){ //console.log(ev.target) if(ev.target.tagName==‘LI‘){ console.log(ev.target.innerHTML); } //console.log(ev.target.tagName) }; list.innerHTML+=‘<li>yellow</li>‘; //因为innerHTML的原因，上面for的功能会失效，这样使用事件委托能够实现想要的功能。 };</script></head><body><ulid="list"><li>red</li><li>green</li><li>blue</li><li>pink</li><li>black</li></ul></body><script> window.onload=function(){var text=document.querySelector("input");var ul=document.querySelector("ul"); text.onkeydown=function(ev){if(ev.keyCode==13&& ev.altKey){//这个条件成立，说明用户按下了回车键//console.log(‘回车键‘);var li=document.createElement("li"); li.innerHTML=this.value; ul.appendChild(li);this.value=‘‘;}};};</script></head><body><inputtype="text"/><ul></ul></body> var btn1=document.getElementById("btn1"); //on的方式添加事件 btn1.onclick=function(){ console.log(‘这是按钮一的第一次点击‘); }; btn1.onclick=function(){ console.log(‘这是按钮一的第二次点击‘); //只会打印出这个 }; <inputtype="button"id="btn1"value="按钮1"/> //移除on事件 * 2、只能移除同一阶段的绑定函数(所有参数都要一样)
var btn2=document.getElementById("btn2"); //addEventListener方式添加的事件(匿名函数) btn2.addEventListener(‘click‘,function(){ console.log(‘这是按钮二的第一次点击‘); console.log(this); //指向事件发生的那个对象 },false); btn2.addEventListener(‘click‘,function(){ console.log(‘这是按钮二的第二次点击‘); },false); //当点击btn2 两个click事件的内容都被打印出来 //removeEventListener移除不了匿名函数
/*btn2.removeEventListener(‘click‘,function(){
console.log(‘这是按钮二的第一次点击‘);
console.log(this); //指向事件发生的那个对象
//addEventListener方式添加的事件(命名函数) btn2.addEventListener(‘mouseover‘,fn1,false); btn2.addEventListener(‘mouseover‘,fn2,false); function fn1(){ console.log(‘这是按钮二的第一个mouseover事件‘); console.log(this); //指向事件发生的那个对象 } function fn2(){ console.log(‘这是按钮二的第二个mouseover事件‘); }//removeEventListener移除命名函数
btn2.removeEventListener(‘mouseover‘,fn1,true);
btn2.removeEventListener(‘mouseover‘,fn2,false);
<inputtype="button"id="btn2"value="按钮2"/>
window.onload=function(){ var div=document.getElementById("div"); var span=document.getElementById("span"); var html=document.getElementById("html"); var body=document.getElementById("body"); window.id=‘window1‘; function fn(){ console.log(this.id); } //用on的方法给元素添加事件，所有的浏览器都是一样的，先触发事件源对象，然后再往外执行（冒泡的阶段） window.onclick=fn; //window1 html.onclick=fn; //html window1 body.onclick=fn; //body html window1 div.onclick=fn; //div body html window1 span .onclick=fn; //span div body html window1 };</script></head><bodyid="body"><divid="div">div<spanid="span">span</span></div></body><script> window.onload=function(){var btn=document.getElementById("btn");//btn就是一个目标元素，因为他没有发生嵌套。他身上的事件就是按书写顺序来执行 btn.addEventListener(‘click‘,function(){ alert(‘冒泡‘);},false); btn.addEventListener(‘click‘,function(){ alert(‘捕获‘);},true); //因为btn具有两个click事件，当在目标阶段的时候，不受执行阶段（true）和冒泡阶段（false）影响， 只受书写顺序先后影响，先后执行。
};</script></head><body><inputtype="button"id="btn"value="按钮"/></body> var box1=document.getElementById("box1"); var box2=document.getElementById("box2"); var box3=document.getElementById("box3"); //用on添加事件 box1.onclick=function(ev){ console.log(‘box1点击了‘); ev.cancelBubble=true; }; box2.onclick=function(ev){ console.log(‘box2点击了‘); ev.cancelBubble=true; }; box3.onclick=function(ev){ console.log(‘box3点击了‘); ev.cancelBubble=true; }; };<divid="box1">box1<divid="box2">box2<divid="box3">box3</div></div></div> //用addeventListener添加的事件 var box4=document.getElementById("box4"); var box5=document.getElementById("box5"); var box6=document.getElementById("box6"); box4.addEventListener(‘click‘,function(ev){ console.log(‘box4点击了‘); ev.stopPropagation(); }); box5.addEventListener(‘click‘,function(ev){ console.log(‘box5点击了‘); ev.stopPropagation(); }); box6.addEventListener(‘click‘,function(ev){ console.log(‘box6点击了‘); ev.stopPropagation(); });<divid="box4">box4<divid="box5">box5<divid="box6">box6</div></div></div> //阻止右键菜单 document.oncontextmenu=function(){ return false; }; document.addEventListener(‘contextmenu‘,function(ev){ ev.preventDefault(); },false); document.onmousewheel=function(ev){ console.log(‘鼠标滚动了-Chrom‘,ev.wheelDelta); }; document.addEventListener(‘DOMMouseScroll‘,function(ev){ console.log(‘鼠标滚动了-FF‘,ev.detail); }); var box=document.getElementById("box"); //鼠标按下 box.onmousedown=function(ev){ var disX=ev.clientX-box.offsetLeft; var disY=ev.clientY-box.offsetTop; //console.log(disX,disY); //鼠标移动 document.onmousemove=function(ev){ box.style.left=ev.clientX-disX+‘px‘; box.style.top=ev.clientY-disY+‘px‘; }; //鼠标抬起 document.onmouseup=function(){ document.onmousemove=null; }; //阻止默认选中文字 return false; }; };</script></head><body> kaivon<divid="box"></div>标签：结束 alt 布尔 box 功能 版本 scroll round logs
原文地址：http://www.cnblogs.com/CafeMing/p/6555331.html
