外围线outline--css
1.表单获取焦点事件onfocus;
例：input.onfocus=function(){
语句;
}
2.表单失去焦点时触发的事件onblur;
input.onblur=function(){
一般在失去焦点时，要检测文本框有无内容
if(this.value.length==0){
this.style.borderColor='red';
}else{
this.style.borderColor='gray';
}
}
3.表单提交事件submit;
submit事件是添加在form标签上的，并不是submit按钮
form.onsubmit=function(ev){
阻止其默认事件：返回false;
return false;
或通过事件对象阻止默认事件
var eventObj=ev||event;
(eventObj是关于的兼容问题)
eventObj.preventDefault()
preventDefault():IE8以及之前的浏览器不支持这种方法
return false;通过on添加的事件可以使用这种方法来取消默认设置
}
DOM0级和DOM2级事件的处理方法
1.DOM0级事件处理方法
div.onclick=function(){
语句;
}
特征：a.同一个标签的同一个事件只能绑定一个函数，如果绑定多个，则后绑定的会覆盖前边绑定的;
b.通过DOM0级事件处理添加的函数，清理事件，只需要给这个事件附一个null即可
div.onclick=null;
c.可以把事件写在标签内部
d.不存在兼容问题
2.DOM2级事件处理方法
function demo(){
语句;
}
在标准浏览器中，DOM2事件处理方法
div.addEventListener('click',demo);
第一个参数表示要移除的事件名，第二个参数是要移除事件名所触发的函数
IE8以及之前的浏览器DOM2事件处理方法
div.attachEvent('onclick',demo);
a.可以给同一个标签的同一个事件绑定多个函数，触发事件时按照绑定的顺序执行相应的函数
b.移除事件时，使用removeElementListener的方式
c.处理函数存在兼容性问题，在IE8之前的浏览器中需要使用IE的私有的方法
IE8以及之前的浏览器兼容写法，移除事件
div.detachEvent('onclick',demo);
事件传递
事件的捕获和冒泡：先捕获再冒泡，默认直接显示冒泡；
捕获是从最外层元素向内部子孙元素捕获产生事件的标签，然后执行冒泡过程。冒泡是在捕获后，从内到外一层一层显示出来
通过DOM0级事件处理
1.通过DOM0级事件处理添加的事件无法控制冒泡还是捕获，但可以取消事件冒泡(在冒泡阶段的事件传递)
2.默认在事件冒泡阶段会从点击的标签开始依次触发父标签的点击事件(从最里面的标签向外)
3.可以通过事件对象的cancelBubble属性的true值，或事件对象的stopPropagation()方法取消事件冒泡。阻止触发父元素标签的同类型事件触发
eventObj.cancelBubble=true;
eventObj.stopPropagation();
通过DOM2级事件处理
DOM2级事件处理添加进去的事件，我们可以控制事件的冒泡，捕获过程，当addEventListener方法的第三个参数为true时，表示只进行事件捕获，不执行事件冒泡，在捕获的过程中，触发途径的标签对应的事件函数，当第三个参数为false，表示执行事件冒泡的过程（默认情况）
div1.addEventListener('click',function demo(){
语句;
},true);
取消事件的传递，可以使用事件对象的stopPropagation()方法阻止时间的捕获冒泡
元素的拖拽效果js语句
// 获取到要拖拽的标签
var div=document.querySelector('#div');
// 当鼠标在标签上按下时，开始进行拖动流程mousedown>mousemove>mouseup
div.onmousedown=function(ev){
var eventObj=ev||event;
// 获取到鼠标的坐标点相对于标签边框的间隔
var left=eventObj.offsetX;
var top=eventObj.offsetY;
document.onmousemove=function(ev){
var eventObj=ev||event;
// 使用鼠标当前相对于浏览器边框的位置减去初始点击时相对于标签间隔，就可以拿到鼠标移动尺寸
var offsetLeft=eventObj.clientX-left;
var offsetTop=eventObj.clientY-top;
div.style.left=offsetLeft+'px';
div.style.top=offsetTop+'px';
}
document.onmouseup=function(){
// 把move事件清理掉
document.onmousemove=null;
document.onmouseup=null;
}
}
