进击的王十二

Js-关于Js事件看这一篇就够了！

Ⅰ- 壹 - 事件对象基础

1. js事件是事件驱动性语言，可分为系统派发事件，自定义派发事件
2. javascript 中系统事件自动抛发。分类有：

MouseEvent（鼠标事件）
InputEvent （input事件）
KeyboardEvent（键盘事件）
WheelEvent （滚轮事件）
Event对象
FocusEvent对象

3. 各个事件中具备自身独立的属性，
比如clientX、clientY只属于mouseEvent；keyCode只属于KeyboardEvent等。
4. Event称为事件基类，基类的属性是最少的。

5. 事件是通知和监听组合完成的，先监听后通知，执行对应的函数

6. 只有DOM可以做事件监听

一事件原理（三个阶段）

事件捕获（由外到内）
目标阶段
事件冒泡（由内到外）

事件冒泡(event bubbling)，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。即子标签发生事件后,向父级发送该事件,一直追溯到document。如:点击一个嵌套在 body中的button,则该button的onclick事件也会传递给body、document中,触发他们的onclick里触发的函数。

1 理解事件原理：

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
div1.addEventListener("click", clickHandler1);
div2.addEventListener("click", clickHandler2);
div3.addEventListener("click", clickHandler3);
function clickHandler1(e) {
    console.log("div1")
}
function clickHandler2(e) {
    console.log("div2")
}
function clickHandler3(e) {
    console.log("div3")
}

2 目标阶段

e.currentTarget 是事件侦听事件对象（什么对象执行addEventListener函数就是谁）
e.target 事件的目标对象事件实际触发的目标阶段最后对象，
e.srcElement 事件的目标对象，兼容IE
事件函数中this默认等同于e.currentTarget

e. target—>e. srcElement—>e. toElement 事件点击的目标对象

e. currentTarget—>事件侦听的对象---->this 在事件监听的时候this指向的就是事件监听的对象

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

var divs = document.querySelectorAll("div");
    for (var i = 0; i < divs.length; i++) {
      divs[i].addEventListener("click", clickHandler1);
    }

function clickHandler1(e) {
    console.log(e.target)//1
  事件实际触发的目标
    console.log(e.currentTarget)
    console.log(this)
}

二阻止事件冒泡

当对子元素添加了事件侦听后，执行的时候会触发父元素相同类型的事件，此时需要阻止事件冒泡。
早期IE是没有捕获阶段的，只有冒泡，cancelBubble为阻止冒泡。后来的stopPropagaiton，既有阻止冒泡的功能，也有阻止捕获的功能，但如果译为阻止传播，那么跟cancel就是两个东西了，所以还是叫做阻止冒泡。阻止事件冒泡（传播）的方法是：

e.stopPropagation();
e.cancelBubble=true; IE8及以下浏览器

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
div1.addEventListener("click", clickHandler1);
div2.addEventListener("click", clickHandler2);
div3.addEventListener("click", clickHandler3);
function clickHandler1(e) {
	e.stopPropagation();//阻止事件冒泡
	// e.cancelBubble=true;//阻止事件冒泡   IE8一下浏览器
    console.log("div1")
}
function clickHandler2(e) {
    console.log("div2")
}
function clickHandler3(e) {
    console.log("div3")
}

三事件派发（自定义派发事件）

事件分为系统派发事件和自定义派发事件。

addEventListener();//事件侦听方法，仅用于EventTarget对象
removeEventListener(type,fn,false); //这里 fn 必须是原有绑定的函数，否侧解除无效

dispatchEvent();//抛发事件方法，派发事件，仅用于EventTarget对象

必须要先侦听再派发
侦听和派发的对象是同一个，可以是DOM元素，也可以是EventTarget，或者继承EventTarget的类
侦听和派发的事件类型完全相同，其实事件类型就是一个任意字符串
系统派发的事件字符串是固定的，自定义派发的事件，字符串可以任意
事件侦听回调函数，不能传参,因此事件回调函数中有且仅有一个参数,这个参数即为事件对象
事件都可以手动派发，手动派发的话，页面加载完后就会执行

//document就是侦听派发的对象
//click就是这里的事件类型
document.addEventListener("click",clickHandler);

//div元素的继承为下：
//Object-->EventTarget-->Node-->Element-->HTMLElement-->HTMLDivElement

//EventTarget叫事件目标对象
var target=new EventTarget();
target.addEventListener("chilema",clickHandler);//执行创建的事件对象
//Event实例的对象叫事件对象  创建一个事件对象 chilema
var evt=new Event("chilema");
evt.num=10;
target.dispatchEvent(evt);//派发事件
//
function clickHandler(e){
	//e.type为派发的事件类型
   console.log(e.type);
}

四事件委托（系统派发）

事件侦听添加（注册事件）占有内存的，尽量减少事件侦听的数量，将子元素的事件委托给父元素来执行，叫做事件委托。
当删除对象时，一定要将对象上的侦听事件移除，否则会造成内存泄露。

1 绑定事件 addEventListener()和事件的清除removeEventListener

参数：addEventListener(事件类型，事件回调函数，是否捕获阶段执行（默认false）||对象{once:true})//是否只执行一次

//给body侦听点击事件，冒泡阶段执行
 document.body.addEventListener("click", clickHandler);
 //给body侦听点击事件，捕获阶段执行
 document.body.addEventListener("click", clickHandler,true);
 //给body侦听点击事件，只执行一次
 document.body.addEventListener("click", clickHandler,{once:true});

事件侦听添加（注册事件）占有内存的，所以当删除对象时，一定要将对象上的侦听事件移除
参数: removeEventListener(事件类型,删除事件侦听的回调函数)

 document.body.removeEventListener("click", clickHandler);

案例：点击 li ，让其子元素 ul 切换显示。

HTML

<ul id="menu">
   <li>北京
        <ul>
            <li>海淀</li>
            <li>昌平
                <ul>
                    <li>沙河</li>
                    <li>回龙观</li>
                    <li>天通苑</li>
                </ul>
            </li>
            <li>朝阳</li>
            <li>东城</li>
        </ul>
    </li>
    <li>河北</li>
    <li>天津</li>
    <li>河南</li>
    <li>山西</li>
</ul>

var menu=document.querySelector("#menu");
//给最外层的ul侦听点击事件
menu.addEventListener("click",clickHandler);

function clickHandler(e){
	//如果点击的不是li标签，直接退出
    if(e.target.constructor!==HTMLLIElement)return;
    //如果点击的li没有子元素，直接退出
    if(!e.target.firstElementChild) return;
    //阻止事件冒泡
    e.stopPropagation();
    //控制li下的ul显示隐藏
    if(!e.target.bool) e.target.firstElementChild.style.display="none";
    else e.target.firstElementChild.style.display="block";
    e.target.bool=!e.target.bool;
}

2 addEventListener() 和 onclick的区别：

onclick 不能同时执行两个函数，addEventListener()可以执行两个不同的函数
移除事件侦听的方式不同

document.onclick=function(){
	document.onclick=null;//移除事件侦听
    console.log("a")
}
//事件会覆盖上面的事件
document.onclick=function(){
    console.log("b");
}

document.addEventListener("click",clickHandler1);
document.addEventListener("click",clickHandler2);
function clickHandler1(e){
	//移除事件侦听
	document.removeEventListener("click",clickHandler1);
    console.log("a");
}
function clickHandler2(e){
   console.log("b")
}

onclick事件匿名函数的不断迭代就会造成回调地狱，而使用事件注册时用的是命名函数就会减少造成回调地狱

// 事件匿名函数的不断迭代就会造成回调地狱
document.onclick=function(){
    var bn=document.querySelector("button");
    bn.onclick=function(){
        console.log("aaa");
    }
}

addEventListener可以在捕获阶段和冒泡阶段触发，而onclick只能冒泡阶段触发

 document.body.addEventListener("click", clickHandler);//冒泡阶段执行
 document.body.addEventListener("click", clickHandler,true);//捕获阶段执行

onclick支持IE低版本，addEventListener不支持IE8一下，低版本的IE使用 attachEvent 进行事件侦听；使用 detachEvent 移除事件侦听。

document.attachEvent("onclick",clickHandler);//IE8及以下使用，其他版本和其他浏览器不支持
function clickHandler(e){
    console.log("aaa");
    document.detachEvent("onclick",clickHandler);//移除事件侦听
}

3 事件委托和事件区别

如果侦听函数调用（addEventListener被使用），就会在内存中添加存储
尽量减少事件的侦听，因此就会将事件委托给父容器做侦听，以达到减少事件侦听的存储
e.currentTarget 是事件侦听事件对象（什么对象执行addEventListener函数就是谁）
e.target 事件的目标对象事件实际触发的目标阶段最后对象，e.srcElement兼容IE
事件函数中this默认等同于e.currentTarget

  function clickHandler(e){
        // if(e.target.nodeName!=="LI") return;  判断是不是li标签  第一种方法
        //判断是不是li标签  第二种方法
        if(e.target.constructor!==HTMLLIElement) return;
        // console.log(e);
        // e.currentTarget 是事件侦听事件对象（什么对象执行addEventListener函数就是谁）
        // e.target 事件的目标对象 事件实际触发的目标阶段最后对象，e.srcElement兼容IE
        // 事件函数中this默认等同于e.currentTarget
        // console.log(e.currentTarget,e.target,e.srcElement);
        console.log(e.target.textContent);
    }

Ⅱ - 贰 - MouseEvent（鼠标事件）

一 MouseEvent的类别

事件类别	简述
mousedown	鼠标按下
mouseup	鼠标释放
click	左键单击
dblclick	左键双击
mousemove	鼠标移动
mouseover	鼠标经过
mouseout	鼠标滑出
mouseenter	鼠标进入
mouseleave	鼠标离开
contextmenu	右键菜单

执行顺序：mousedown —> mouseup —> click 完成单击
区别：mouseover和mouseout子元素也会触发，可以冒泡触发
区别：mouseenter和mouseleave是针对侦听的对象触发，阻止了冒泡
x,y都是鼠标的坐标
e.type 可以获取事件名称

二阻止鼠标的默认事件

e.preventDefault()
e.returnValue=false;//IE8 及以下兼容写法
return false;//IE兼容写法，只用作on事件阻止默认事件

1.去除单击右键菜单

document.body.addEventListener("contextmenu",clickHandler);
function clickHandler(e){
    e.preventDefault();//阻止事件默认行为
    console.log(e.type);
}

2 阻止图像默认拖拽

var img=document.querySelector("img");
img.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){
    e.preventDefault();
}

3 阻止文字的拖拽和选择

document.body.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){
    e.preventDefault();  
}

4 阻止表单提交及重设

var bn=document.querySelector("[type=submit]");
bn.addEventListener("click",clickHandler);
function clickHandler(e){
    e.preventDefault();
}

//或者对form来写
var form=document.querySelector("form");
form.addEventListener("submit",submitHandler);
function submitHandler(e){
    e.preventDefault();
    //e.returnValue=false;//IE8 及以下兼容写法
}

三鼠标位置和按键点击

打印出MouseEvent对象内容：

document.body.addEventListener("mousedown",clickHandler);
function clickHandler(e){
    console.log(e);
}

打印结果如下（只截取了部分内容）：

altKey ctrlKey shiftKey metaKey 是否按键点击
button buttons which用来判断是鼠标的哪个键操作的
左键对应的值为 0、1、1
中键对应的值为 1、4、2
右键对应的值为 2、2、3
timeStamp 从页面打开开始到触发事件的时间

1 鼠标位置

（1）clientX和clientY与x，y

clientX和clientY与x，y一样的，都是客户区域坐标，指鼠标的坐标，以浏览器显示区域的左上角开始，x,y是新浏览器支持

以下截图打印的结果都是div2元素的左上顶点（从边框开始）的位置坐标。

（2）offsetX，offsetY

offsetX，offsetY 针对目标元素的左上角坐标（e.target）

（3）layerX,layerY

layerX,layerY 往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角，类似于offsetx,offsety
layerX,layerY 如果e.target（目标对象）不是定位元素，这个值就是相对侦听事件对象父容器的左上角，如果定位与offsetX，和offsetY相似

当元素及它的父级都没有定位属性时，以body的左上角为原点

当元素的父级都有定位属性时，以父级的左上角为原点：

当元素自身有定位属性时，以自身的左上角为原点：

（4）pageX， pageY

pageX， pageY相对页面左上角的距离

（5） screenX screenY

screenX screenY 相对屏幕左上角的位置

Ⅲ - 叁 - InputEvent (input事件)、FocusEvent对象（焦点相关的事件）、KeyboardEvent（键盘事件）

通常情况下这三个事件一起使用

一 FocusEvent对象（焦点相关的事件）

主要针对所有表单元素和超链接，当 input 聚焦时触发 focus 事件，失去焦点时触发 blur 事件。
focus 获得焦距的方式有两种点击和tab切换，多个input的时候，会出现relatedTarget 为上一个失焦对象。

事件名称	简述
focus	获得焦距
blur	失去焦距

事件对象中 relatedTarget 为上一个失焦对象

<input type="text" name="text" id="user">
<script>
var user=document.getElementById("user");
user.addEventListener("focus",focusHandler);
function focusHandler(e){
    // e.relatedTarget  上一个失焦对象
    console.log(e);
}
</script>

二 InputEvent (input事件)

当 input 在输入内容时，就会触发 input 事件。

事件对象的 inputType 属性的值有：

事件名称	简述
insertCompositionText	使用输入法的插入文本
historyUndo	历史返回
insertText	不用输入法的插入文本
deleteContentBackward	删除前一个 backspace删除
deleteContentForward	删除后一个 delete删除
deleteByCut	剪切删除
insertFromPaste	粘贴插入

<input type="text" name="text" id="user">
<script>
var user=document.getElementById("user");
user.addEventListener("input",inputHandler);
    function inputHandler(e){
        console.log(e);
        // e.data: "s"  本次输入的内容
        // e.isComposing: false  是否是输入法文本
        // e.inputType 输入的类型（
                        // insertCompositionText 输入插入
                        // historyUndo 历史返回
                        // insertText  插入文本
                        // deleteContentBackward 退格删除（删除前一个）
                        // deleteContentForward  delete删除（删除后一个）
                        // deleteByCut 剪切删除
                        // insertFromPaste 粘贴插入）
        
    }
</script>

三 KeyboardEvent（键盘事件）

事件名称	简述
keyCode	属性的值与ASCII码中对应小写字母或数字的编码相同。字母中大小写不影响。
keydown	键盘按下时触发，如果键盘一直按下，则会一直触发这个事件
keyup	键盘抬起时触发

常用的几个键码：13（回车）、37（左）、38（上）、39（右）、40（下）
https://www.cnblogs.com/lxwphp/p/9548823.html 键码表

document.addEventListener("keydown",keyHandler);
document.addEventListener("keyup",keyHandler);
var type=""; 
function keyHandler(e){
	e.code: "KeyS" // 按下的键
	e.key: "a"  //按下的键
	e.keyCode:// 16 键码   	
	e.which: //65 等同于keyCode
}

keydown表示键盘按下时触发，如果键盘一直按下，则会一直触发这个事件。我们希望当键盘按下后，不管按了多久，都只触发一次keydown事件，可以这么来写：

document.addEventListener("keydown",keyHandler);
document.addEventListener("keyup",keyHandler);
var type="";
function keyHandler(e){
	//第一次按下时，type为空，不满足条件，执行下面的代码
	//将当前的e.type赋值给type
	//因为键盘一直是按下状态，所以会一直触发函数，此时type=e.type，所以直接跳出
    if(type===e.type)return;
    type=e.type; 
    console.log(e)
}

四节流和防抖

1 节流

为什么要节流？

文本框在输入的时候，如果每输入一次就判断一次，会造成效率太低，我们让它每间隔一段时间，再去验证。即指连续触发事件但是在 n 秒中只执行一次函数。

实现原理

给 input 设置一个属性，第一次触发事件时，属性值为 false，则往下执行，500毫秒后获取 input 的值，同时删除 ids 的值；第二次输入时，当500毫秒还没到时，ids 为 true ，则直接跳出，不去获取 value 值。在500毫秒中，只执行一次函数。

(1) 节流的定时器写法

<input type="text" name="text" id="user">
<script>
	init();
	function init(){
	    var user=document.getElementById("user");
	     user.addEventListener("input",inputHandler);
	}
	function inputHandler(e){
	    //判断，如果input.ids为false,则往下执行
	    if(this.ids) return;
	    //500毫秒后，执行showValue函数，同时删除ids的值
	    this.ids=setTimeout(function(elem){
	    	//因为定时器函数会改变this指向，这里将this以参数的形式传进来
	        clearTimeout(elem.ids);
	        elem.ids=null;
	        showValue(elem.value);
	    },500,this);
	}
	//打印出input的值
	function showValue(txt){
	    console.log(txt);
	}
</script>

</script>

(2) 节流的时间戳写法

<input type="text" name="text" id="user">
<script>
	init();	
	function init() {
	    var user = document.getElementById("user");
	    user.addEventListener("input", inputHandler);
	}
	var lastTime=0;
	function inputHandler(e) {
	    //每次触发事件获取当前时间
	   let nowTime=new Date().getTime();
	   //若时间间隔大于500毫秒，则执行代码
	   if(nowTime-lastTime>500){
	       //重新计时
	       lastTime=nowTime;
	       showValue(this.value);
	   }
	}
	//打印出input的值
	function showValue(txt) {
	    console.log(txt);
	}
</script>

2 防抖

什么是防抖？

防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

为什么要使用防抖？

keydown事件，当键盘按下时触发，如果键盘一直按下，则会一直触发这个事件，我们并不希望在事件持续触发的过程中那么频繁地去执行函数。这种情况防抖是比较好的解决方案。

实现原理

当持续触发keydown事件时，事件处理函数handle只在停止按键500毫秒之后才会调用一次，也就是说在持续触发keydown事件的过程中，事件处理函数handle一直没有执行。

(2) 防抖写法

<input type="text" name="text" id="user">
<script>
	init();
	function init() {
	    var user = document.getElementById("user");
	    user.addEventListener("input", inputHandler);
	}
	var ids=null;
	function inputHandler(e) {
		//每次输入，把前面的定时器清除，重新开启定时器
	    if(ids !== null) clearTimeout(ids);
	    ids=setTimeout(function(elem){
	        showValue(elem.value);
	    },500,this)
	}
	//打印出input的值
	function showValue(txt) {
	    console.log(txt);
	}
</script>

(2) 防抖的封装

 function debounce(fn, wait) {
    var timeout = null; //定义一个定时器
    return function () {
        if (timeout !== null)
            clearTimeout(timeout); //清除这个定时器
        timeout = setTimeout(fn, wait);
    }
}
// 处理函数
function handle() {
    console.log(Math.random());
}
// 侦听事件
document.addEventListener("keydown", debounce(handle, 1000));

3 防抖和节流的区别

防抖是将多次执行变为最后一次执行
节流是将多次执行变为每隔一段时间执行

Ⅳ - 肆 - WheelEvent （滚轮事件）

滚轮滚动时，会触发滚轮事件，这个事件可以在任何元素上触发，如果不阻止冒泡的话，最终都会冒泡到document对象上面。

在使用滚轮事件时，一般只需要知道是向上或者向下滚动就可以。
火狐浏览器使用 DOMMouseScroll
其他浏览器使用 mousewheel

火狐浏览器滚轮向下滚动（页面往上）时，e.detail为3；滚轮向上滚动（页面往下）时，e.detail为-3。

chrome浏览器滚轮向下滚动（页面往上）时，e.deltaY为正数；滚轮向上滚动（页面往下）时，e.deltaY为负数。

可以根据这两个值来判断页面是向上还是向下滚动。

案例：当滚轮滚动时，让div随着滚轮滚动的方向移动：

document.addEventListener("DOMMouseScroll",mouseHandler);   
document.addEventListener("mousewheel",mouseHandler);   
var div=document.querySelector("div");
function mouseHandler(e){
	var detail;
	if(e.detail!==0)detail=e.detail;
	else detail=e.deltaY<0 ? -3 : 3;
	div.style.top=div.offsetTop+detail+"px";
}

Ⅴ - 伍 - Event对象事件

Event称为事件基类，基类的属性是最少的。
Event对象代表事件的状态，比如事件在其中发送的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

一 Event事件的类别

事件类别	简述
change	修改事件
submit	提交事件
reset	重设事件
select	选择文字事件
resize	重新修改大小事件
scroll	滚动条事件
load	加载事件
unload	卸载事件
error	错误事件

二事件详解

1 change 修改事件

change 是修改事件，主要用于表单元素，当表单元素被修改时，失去焦点时才会触发事件

input、checkbox、radio都可触发

（1）input 的 change 事件：

只有当 input 的 value 有修改时，才会触发事件

<input type="text" id="user" name="user">
<script>
var user=document.getElementById("user");
user.addEventListener("change",changeHandler);
function changeHandler(e){
	console.log(e);
}
</script>

（2）select 的 change 事件：

当 select 为多选时，可以用下面这两个属性来获取被选中的值

属性	简述
selectedIndex	下拉菜单被选中的索引值
selectedOptions	下拉菜单中被选的option标签列表

<!--multiple 设置select多选-->
<select id="city" name="city" multiple>
    <option>北京</option>
    <option>西安</option>
    <option>上海</option>
</select>
<script>
var city=document.getElementById("city");
city.addEventListener("change",changeHandler);
function changeHandler(e){
	console.log(this.selectedIndex);//获得被选中的索引值
	console.log(this.selectedOptions);//获得被选的option标签列表
}
</script>

当 select 为多选时，向后台提交数据，会看到请求数据中 city 被传了两个值，这样传参是不正确的，我们可以在提交表单的时候，将 select 的值合并一下。

去掉 select 的 name 属性，同时在页面中放入一个隐藏的 input，name 为 citySelect，将 select 被选中的值以符号分隔传给 input。

<input type="text" name="citySelect" id="citySelect">
<select id="city"  multiple>
    <option>北京</option>
    <option>西安</option>
    <option>上海</option>
</select>
<script>
var city=document.getElementById("city");
var citySelect=document.getElementById("citySelect");
city.addEventListener("change",changeHandler);
function changeHandler(e){
	var selectStr=Array.from(this.selectedOptions).reduce(function(value,item){
								return value+(value.length===0 ? "" :",")+item.textContent;
           				 },"");
	citySelect.value=selectStr;
}

</script>

提交表单后，就可以看到数据可以正确传递了

2 submit 提交事件、reset 重设事件

submit 和 reset，表单的事件类型，只能作用于form元素
当给 form 侦听 submit 事件后，点击 form 里的 button 按钮或者 submit 按钮，都会触发 submit 提交事件。
提交submit时,没有name的表单不会被提交
e. preventDefault() ; 阻止默认事件页面跳转

<form action="#" method="GET">
<input type="text" id="user" name="user">
</form>
<script>
var form=document.querySelector("form");
var user=document.getElementById("user");
form.addEventListener("submit",submitHandler);
form.addEventListener("reset",resetHandler);
function submitHandler(e){
    e. preventDefault() ;阻止默认事件，组阻止提交的时候跳转
	//提交处理
}           
function resetHandler(e){
    e. preventDefault() ;
	//重置
}
</script>

3 select 选择文字事件

select 文本选择事件，主要针对于 input 或者中的文本选择，与下拉菜单没有关系，主要是选择文本框中的文本内容时触发事件。

可以用 input 的以下属性来获取选中的值：

属性	简述
selectionStart	选中值的开始位置下标
selectionEnd	选中值的结束位置下标
selectionDirection	有两个值：forward为从左到右选择、backward为从右到左选择

<input type="text" id="user" name="user">
<script>
var user=document.getElementById("user");
user.addEventListener("select",selectHandler);
function selectHandler(e){
    console.log(user.selectionStart);//开始位置的索引
    console.log(user.selectionEnd);//结束位置的索引
    console.log(user.selectionDirection);//选择的方向        
}
</script>

案例： 将 input 或者 textarea 中选中的小写字母改成大写字母

//接上一段代码
function selectHandler(e){
	user.value=user.value.slice(0,user.selectionStart)+user.value.slice(user.selectionStart,user.selectionEnd).toUpperCase()+user.value.slice(user.selectionEnd)
}

4 resize 重新修改大小事件

resize 重新修改大小事件，主要针对window事件，作用于window和，窗口被改变大小时事件被触发

**案例：**当窗口改变时，将 html 字体大小成比例缩小：

 window.addEventListener("resize",resizeHandler);
function resizeHandler(e){
    var scale=document.documentElement.clientWidth/screen.width;
    document.documentElement.style.fontSize=100*scale+"px";
}

5 scroll 滚动条事件

scroll 滚动事件,可以针对任何具备滚动条的容器进行侦听。

注意：

滚轮滚动不是滚动事件触发的方式，滚轮滚动改变了滚动条的位置，才会触发滚动事件。滚轮滚动属于间接触发滚动条事件
只有滚动条位置的改变才能触发滚动事件
如果要设置flash中的滚动条不改变外部的滚动条，需要在flash的标签上设置停止冒泡，flash标签有
当元素滚动，页面滚动条不滚动时，需要设置滚动元素的阻止默认事件

document.body.addEventListener("scroll",scrollHandler);
function scrollHandler(e){
	//如果要设置flash中的滚动条不改变外部的滚动条，需要在flash的标签上设置停止冒泡
	e.stopPropagation();
}

6 unload 卸载事件

unload 卸载事件，关闭窗口、原有的页面在刷新时，原有的页面会被卸载掉，这个时候触发事件。