大家好，我是讯享网，很高兴认识大家。

javaScript知识点和实例

一、最终显示效果：点击红色按钮，会有视屏弹出 并带有遮罩层

点击黄**域可以关闭视频 并回到最初的状态。

页面主要代码：main中主要包含一个a，控制显示的按钮。设置有id值。

<div class="main"> <a href="javascript:;" class="video" id="video"></a> </div> 

讯享网

以下代码就是用来控制视频的显示效果，.video-btn 包含了视频显示区域以及右边黄色关闭按钮（虽然黄色关闭按钮有点丑）。

讯享网id="shadow"用来控制遮罩层。主要是对各元素设置id的值 后面js就可以方便的调用各元素。 1 <div class="video-btn" id="video-btn"> 2 <div class="video-area" id="video-area"></div> 3 <a class="video-shut" id="video-shut">x</a> 4 </div> 5 <div id="shadow"></div> 

下面来看一下有关css

首先设置video-btn区域。

 .video-btn{ position: absolute; width:600px; height: 300px; background:black; top:50%; left: 50%; margin-top: -150px; margin-left:-300px; display: none; z-index: 101; } .video-area{ float:left; width:500px; height: 300px; background:red; } .video-shut{ height:100px; width:100px; font-size:40px; color:pink; float:left; text-align: center; /*line-height: 50px;*/ background: yellow; display: block; padding-top:30px; } 

然后设置遮罩层的css

讯享网 #shadow{ position: absolute; opacity: 0.5; filter:alpha(opacity=50); bottom:0; left: 0; right: 0; top: 0; background:black; z-index: 100; display: none; } 

重点1：此处一定把两个div设为绝对定位，让其脱离文档流。

重点2：遮罩层要设置bottom，left，right，top值为0 这样遮罩层就可以平铺整个屏幕了。

重点3：一定要把这两个div设为display：none。让用户一开始是看不到这两个div ，否则一进去就看到这两个会很丑。

重点4：要设置z-index的值，黄色按钮和显示视频那个div的优先级一定要比遮罩层的优先级大，不然点击不了。

现在开始js。前面五个获取id赋值。然后在点击黄色按钮时响应事件。

点击事件1：将视频所在的div设置display：block。将遮罩层所在div设置display：block。 同时，视屏div内显示土豆视频。 此链接为土豆网的分享链接。

点击事件2：在点击黄色x按钮时，应该将这两个div隐藏起来。即设置两个div的display：none。

 1 <script> 2 var obtn=document.getElementById('video'); 3 var ovideo=document.getElementById('video-btn'); 4 var oatn=document.getElementById('video-area'); 5 var oshut=document.getElementById('video-shut'); 6 var oshadow=document.getElementById('shadow'); 7 obtn.onclick=function () { 8 ovideo.style.display='block'; 9 oshadow.style.display='block'; 10 oatn.innerHTML='<embed src="http://www.tudou.com/v/Bs_lZPxcoRs/&rpid=&autoPlay=true&resourceId=_04_05_99/v.swf" allowFullScreen="true" quality="high" width="500" height="300" align="middle" allowScriptAccess="always" flashvars ="isAutoPlay=true" type="application/x-shockwave-flash"></embed>'; 11 } 12 oshut.onclick= function () { 13 ovideo.style.display='none'; 14 oshadow.style.display='none'; 15 } 16 </script> 

二、javaScript常用事件

1、鼠标事件

1、onmousemove, onmouseenter 和 onmouseover 的不同。

（1）onmousemove 事件在鼠标移动到 div 元素上时触发。

（2）onmouseenter 事件在鼠标指针进入 div 元素时触发，onmouseleave 事件在鼠标指针离开 div 元素时触发，唯一的区别是 onmouseenter ，onmouseleave事件不支持冒泡。

（3） onmouseover 事件在鼠标指针进入 div 元素时触发 ,在子元素上也会触发(p 和 span), onmouseover,onmouseout事件支持冒泡。

（4） mouseout 与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

解释：鼠标监听A元素的onmouseout事件，结果当鼠标移到A元素里面的B元素时，事件也触发了。
原因是因为：事件冒泡。
当鼠标从A元素进入到B元素时，A也会触发自己的onmouseout事件，但是由于自己并没有绑定这个事件，因此B的onmouseout传递给了A元素，所以当进入B时，实际上就触发了A元素的onmouseout事件了。
解决办法是使用onmouseleave事件来代替onmouseout事件。
onmouseleave禁止了事件冒泡，因此B元素并不会触发事件。

因此，如果不希望触发冒泡事件的时候尽量使用onmouseenter和onmouseleave。

附加链接： https://www.runoob.com/try/try.php?filename=tryjsref_onmousemove_over_enter

2、键盘事件

3、框架、对象事件

4、表单事件

1、onfocusin 事件类似于 onfocus 事件。 主要的区别是 onfocus 事件不支持冒泡。因此，如果你想知道元素或者其子元素是否获取焦点，需要使用 onfocusin 事件。

2、 注意：Internet Explorer, Firefox 或 Opera 12 及其更早版本不支持 onsearch 事件。

5、剪切板事件

1、oncopy 事件在用户拷贝元素上的内容时触发。

提示： oncopy 事件在用户拷贝元素时也会触发，例如， 拷贝 元素。

提示： oncopy 事件通常用于 type=“text” 的 元素。

提示： 有三种方式可以拷贝元素和内容：

• 按下 CTRL + C
• 在你的浏览器的 Edit(编辑) 菜单中选择 “Copy（复制）”
• 右键鼠标按钮，在上下文菜单中选择 “Copy（复制）” 命令。

2、oncut 事件在用户剪切元素的内容时触发。

注意： 虽然使用的 HTML 元素都支持 oncut 事件，但实际上并非支持所有元素，例如

元素， 除非设置了 contenteditable 为 “true” (查看下文的更多实例)。

提示： oncut 事件通常应用在 type=“text” 的 元素中。

提示： 有三种方式可以剪切内容：

• 按下 CTRL + X
• 从浏览器的编辑菜单中选择 “Cut（剪切）”
• 右击鼠标按钮在上下文菜单中选择 “Cut（剪切）” 命令。

3、onpaste 事件在用户向元素中粘贴文本时触发。

注意： 虽然使用的 HTML 元素都支持 onpaste 事件，但实际上并非支持所有元素，例如

元素， 除非设置了 contenteditable 为 “true” (查看下文的更多实例)。

提示： onpaste 事件通常用于 type=“text” 的 元素。

提示： 有三种方式可以在元素中粘贴内容：

• 按下 CTRL + V
• 从浏览器的编辑菜单中选择 “Paste（粘贴）”
• 右击鼠标按钮在上下文菜单中选择 “Paste（粘贴）” 命令。

5、打印事件

6、拖动事件

7、鼠标/键盘事件对象

三、this关键字

1. 当函数没有被自身的对象调用时 this 的值就会变成全局对象。

2、一般而言，在Javascript中，this指向函数执行时的当前对象。

	注意 this 是保留关键字，你不能修改 this 的值。

3、 函数作为对象方法调用，会使得 this 的值成为对象本身。

4.、call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

实例

function myFunction(a, b) { return a * b; } myObject = myFunction.call(myObject, 10, 2); // 返回 20

尝试一下 »

实例

function myFunction(a, b) { return a * b; } myArray = [10, 2]; myObject = myFunction.apply(myObject, myArray); // 返回 20

通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

四、闭包

1、 变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。

2、闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。

五、JavaScript HTML DOM EventListener

1、 addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

2、向同一个元素中添加多个事件句柄

1. addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件

3、在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： 元素的点击事件先触发 ，然后再触发

元素的点击事件。