js事件

2021-01-04 12:29

阅读：649

标签：事件模型 confirm doc number 定义体验 oca www variable

JS事件

　　事件

　　　　事件 (Event) 是 JavaScript 应?跳动的?脏，进?交互，使??动起来。当我们与浏览器中 Web ??进?某些类型的交互时，事件就发?了。

　　　　事件源: 谁触发的事件

　　　　事件名: 触发了什么事件

　　　　事件监听: 谁管这个事情，谁监视？

　　　　事件处理:发?了怎么办

　　作用:

　　（1）验证?户输?的数据。

　　（2）增加??的动感效果。

　　（3）增强?户的体验度

事件类型

　　JavaScript可以处理的事件类型为：?标事件、键盘事件、HTML事件。

常用的几个事件:

onclick  元素发生鼠标点击时触发
onblur  元素失去焦点时运行的脚本
onfocus   元素获得焦点时运行的脚本
onload    页面加载之后触发
onchange   在元素值被改变时运行的脚本
onmouseover   当鼠标指针移动到元素上时触发
onmouseout     当鼠标指针移出元素时触发
onkeyup   当用户释放按键时触发
onkeydown  在用户按下按键时触发

事件流和事件模型

　　我们的事件最后都有?个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当?个HTML元素产??个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到该事件，这个传播过程称为DOM事件流。

　　事件顺序有两种类型：事件捕获和事件冒泡。

　　　　IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（?档）。

　　　　事件捕获的思想是不太具体的节点应该更早接收到事件，?最具体的节点应该最后接收到事件。事件捕获的?意在于在事件到达预定?标之前捕获它。

BOM对象

　　BOM的核?对象是window，它表示浏览器的?个实例。window对象有双重??，它既是通过 JavaScript访问浏览器窗?的?个接?，?是ECMAScript规定的Global对象。这意味着在??中定义的任何?个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等?法。如果??中包含框架，则每个框架都拥有??的window对象，并且保存frames集合中。在frames集合中，可以通过数值索引（从0开始，从左?右，从上到下）或者框架的名称来访问相应的window对象。

　　浏览器通过（实际是window对象的?法）alert()、confirm()、prompt()?法可以调?系统对话框向?户显示消息。

　　（1）消息框:alert，常?。

　　　　alert() ?法?于显示带有?条指定消息和?个 OK 按钮的警告框。

　　（2）输?框:prompt，返回提示框中的值。

　　　　prompt() ?法?于显示可提示?户进?输?的对话框。

参数（可选）：

　　第?个参数：要在对话框中显示的纯?本。

　　第?个参数：默认的输??本。

（3）确认框:confirm，返回 true/false.

confirm() ?法?于显示?个带有指定消息和 OK 及取消按钮的对话框。

style type="text/css">
?
 #aa{
?
 border: 1px solid red;
?
 height: 100px;
?
 }
?
style> 
body>
?
 div id="aa">
?
 This is a div
?
 div>
?
 button onclick="testAlert();">警告button>
?
 button onclick="testComfirm();">修改button>
?
 button onclick="testPrompt();">输?button>
?
 script type="text/javascript">
?
 // 1.警告框
?
 function testAlert(){
?
 alert(‘警告框！！！‘);
?
 } 
?
 
?
 /*
?
 2.输?框
?
 返回值：输?的内容
?
- */
?
 function testPrompt(){
?
 var item = prompt(‘请输?年龄‘); // item得到输?的值
?
 // console.log(item)
?
 // alert(prompt(‘请输?年龄‘,18)); // 将输?的值输出
?
 }
?
 
?
 /*
?
 3.确认框
?
 返回值：boolean（true|false）
?
- */
?
 function testComfirm(){
?
 var result = confirm(‘真的要改吗？‘);
?
 if(result){
?
 var ele = document.getElementById("aa");
?
 ele.style.color="red";
?
 ele.innerHTML="fdsfsd";
?
 }else{
?
 alert("没事别瞎点。。。");
?
 }
?
 }
?
 script>
?
body>

打开窗?

window.open()?法既可以导航到?个特定的URL也可以?来打开?个新的窗?

script type="text/javascript">
?
function openBaidu(){
?
 window.open(‘http://www.baidu.com‘,‘_self‘); // _self、_blank等
?
 // window.open(); //空?窗?
?
}
script> 
input type="button" name="open" value="百度" onclick=‘openBaidu();‘ />

关闭窗?

window.close()：关闭窗?。

input type="button" value="关闭窗?" onclick="window.close();" />

时间函数

setTimeout() : 在指定的毫秒数后调?函数或计算表达式。返回?个唯?的标识；也可以通过返回的

clearTimeout(id)：来清除指定函数的执?。

var id = setTimeout(function,times); 
?
clearTimeout(id)
    
script type="text/javascript">
 // 延迟3 秒后出现 alert
?
 function hello() {
?
 alert("对不起, 要你久候");
?
 }
?
 setTimeout("hello()", 3000);
?
 // 时间显示器
?
 var timeout;
?
 function init(){
?
 // 拿到当前时间
?
 var date = new Date();
?
 var time = date.toLocaleString();
?
 // 拿到相应对象
?
 var h1 = document.getElementById(‘h1‘);
?
 // 根据需求添加样式
?
 if(0==date.getSeconds()){ // 当时间的秒数变成0时，显示红?字体
?
 h1.innerHTML = ‘‘ + time + ‘‘;
?
 } else {
?
 h1.innerHTML = time;
?
 }
?
 /*
?
- 定时操作，只执??次
?
第?个参数：执?的?法；第?个参数：定时，单位是毫秒 
?
 \* */ 
?
 setTimeout(init,1000); // 等多少时间来执? 
?
 } 
?
 // window.setTimeout(init,1000);// 只执??次  
?
 // 停?操作 
?
 function stopShow () { 
?
 clearTimeout(timeout); 
?
 } 
?
script> 
?
body onload="init();"> 
?
 h1 id="h1">h1> 
?
 button onclick="stopShow()">时间停?button> 
?
body>
    //**在times毫秒后执?function指定的?法，执?之前也可以取消**

setInteval()

setInterval():可按照指定的周期（以毫秒计）来调?函数或计算表达式，也可根据返回的标识?来结束。该?法会不停地调?函数，直到 clearInterval() 被调?或窗?被关闭。

var id = setInterval(function,times);

clearInterval(id);

function test(){ 
?
 console.log("....."); 
?
} 
?
// window是?个全局对象，通过全局对象调?setInterval()函数 
?
window.setInterval(test,1000);

history对象

history 对象是历史对象。包含?户（在浏览器窗?中）访问过的 URL。history 对象是 window 对象的

?部分，可通过 window.history 属性对其进?访问。

history对象的属性：length，返回浏览器历史列表中的 URL 数量。

history对象的?法：

back()：加载 history 列表中的前?个 URL。

forward()：加载历史列表中的下?个 URL。当??第?次访问时，还没有下?个url。

go(number|URL): URL 参数使?的是要访问的 URL。? number 参数使?的是要访问的 URL 在 History

的 URL 列表中的相对位置。go(-1)，到上?个??

location对象

location 对象是window对象之?，提供了与当前窗?中加载的?档有关的信息，还提供了?些导航功

能。也可通过 window.location 属性来访问。

location 对象的属性 href：设置或返回完整的 URL

location 对象的?法

reload()：重新加载当前?档。

replace()：?新的?档替换当前?档。

DOM对象

　　要实现??的动态交互效果，bom 操作远远不够，需要操作 html 才是核?.如何操作 html，就是 DOM。简单的说，dom 提供了?程序动态控制 html 接?。DOM即?档对象模型描绘了?个层次化的节点树，运?开发?员添加、移除和修改??的某?部分。dom 处于javascript 的核?地位上。

节点

　　加载 HTML ??时，Web 浏览器?成?个树型结构，?来表示??内部结构。DOM 将这种树型结构理解为由节点组成，组成?个节点树。对于??中的元素，可以解析成以下?种类型的节点：

　　　　1.文档节点

　　　　2.元素节点

　　　　3.属性节点

　　　　4.文本节点

　　　　5.注释节点

操作元素节点

　　1.获取节点

　　方法:

getElementById()

getElementsByTagName()

getElementsByClassName()

getElementsByName()

案例:

这是?个段落?本

这?是?个段落

? ? 游泳 ? 篮球 ? ?球 ?

? 按照id获取 ? 按照name获取 ? 按照标签名获取 ? 按照class获取 ? 12345678910111213141516171819202122232425

2.创建节点和插?节点

创建节点

createElement() 创建?个新的节点，需要传?节点的标签名称，返回创建的元素对象

createTextNode() 创建?个?本节点，可以传??本内容

innerHTML 也能达到创建节点的效果，直接添加到指定位置了

插入节点

write() 将任意的字符串插?到?档中

appendChild() 向元素中添加新的?节点，作为最后?个?节点

insertBefore() 向指定的已有的节点之前插?新的节点newItem：要插?的节点exsitingItem：参 考节点 需要参考?节点

button onclick="add()">添加段落button>
?
div id="container">div> 
?
script type="text/javascript">
?
 function add(){ 
?
 var container = document.getElementById(‘container‘) 
?
 var paragraph = document.createElement(‘p‘); 
?
 var txt = document.createTextNode(‘hello‘) 
?
 paragraph.appendChild(txt) 
?
 container.appendChild(paragraph) 
?
} 
?
script>

添加 “段落、图?、?本框、选项”

body> 
?
 button onclick="addPara();">添加段落button> 
?
 button onclick="addImg();">添加图?button> 
?
 button onclick="addTxt();">添加?本框button> 
?
 button onclick="addOptions()">添加选项button> 
?
 select name="music"> 
?
 option value="-1">你?内的??歌option> 
?
 option value="0">南?南option> 
?
 option value="1">喜欢你option> 
?
 select> 
?
 hr /> 
?
 div id = "container">div>
?
body>
script type="text/javascript">
 // 添加p节点
?
 function addPara(){
?
// 获取容器 
?
 var container =document.getElementById("container"); 
?
 // 创建段落
 
?
 var p =document.createElement(‘p‘);  
?
 // 第?种?式 
?
 // 创建?本节点 
?
 var txt=document.createTextNode("以后的你会感谢现在努?的你"); 
?
 // 将txt节点追加到p节点中 
?
 p.appendChild(txt); 
?
 // 将p节点追加到container节点中 
?
 container.appendChild(p);  
?
 /* 
?
 // 第?种?式 
?
 // 向p节点中添加内容 
?
 p.innerHTML = "以后的你会感谢现在努?的你"; 
?
 // 将p节点追加到container节点中 
?
 container.appendChild(p); 
?
 */  
?
 /* 
?
 // 第三种?式 
?
 // 将字符串类型的p标签内容添加到container中，不会添加多次 
?
 var str = "以后的你会感谢现在努?的你"; 
?
 container.innerHTML = str; 
?
 */ 
?
 } 
?
  
?
 // 添加图? 
?
 function addImg(){ 
?
 // 创建图? 
?
 var img = document.createElement("img") ;  
?
 /* 
?
 // 设置属性第?种?式 
?
 // 设置img标签的src属性 
?
 // img.src ="http://www.baidu.com/img/bd_logo1.png"; 
?
 */  
?
 // 设置属性第?种?式 
?
 // setAttribute() ?法添加指定的属性，并为其赋指定的值。 
?
 // 设置img的src属性 
?
 img.setAttribute(‘src‘,‘http://www.baidu.com/img/bd_logo1.png‘); 
?
 img.style.width = ‘300px‘;  
?
 img.style.height = ‘200px‘;  
?
 // 获取容器 
?
 var container =document.getElementById("container"); 
?
 // 将img节点追加到container中。 
?
 container.appendChild(img); 
?
 } 
?
  
?
 // 添加?本框 
?
 function addTxt(){ 
?
 // 创建?本框 
?
 var txt =document.createElement("input"); 
?
 /*
?
 // 设置类型第?种?式 
?
 txt.type = "text"; 
?
 txt.value = "添加成功"; 
?
 */ 
?
 // 设置类型第?种?式 
?
 txt.setAttribute(‘type‘, ‘text‘); 
?
 txt.setAttribute(‘value‘, ‘添加成功‘); 
?
 /* 
?
 \* txt.type = ‘password‘ 
?
 \* txt.value = ‘123‘ 
?
 */ 
?
 // 获取容器 
?
 var container =document.getElementById("container"); 
?
 // 将txt节点追加到container中。 
?
 container.appendChild(txt); 
?
 } 
?
  
?
 // 添加下拉框的选项  
?
 function addOptions(){ 
?
 // 第?种?式 
?
 /* 
?
 // 创建下拉项 
?
 var option = document.createElement("option") ; 
?
 option.value = "2" ; 
?
 option.text = "油菜花" ; 
?
 // 获取下拉框 
?
 var sel = document.getElementsByTagName("select")[0]; 
?
 // 添加 下拉项 
?
 sel.appendChild(option); 
?
 */  
?
// 第?种?式: 
?
var option = document.createElement("option") ; 
?
option.value = "2" ; 
?
option.text = "不该" ; 
?
// 获取下拉框 
?
var sel = document.getElementsByTagName("select")[0]; 
?
// 添加下拉项 
?
sel.options.add(option);  
?
// 第三种?式: 添加下拉项 
?
var sel = document.getElementsByTagName("select")[0]; 
?
sel.innerHTML += "" ; 
?
 }  
?
script>

上一篇：php基础

下一篇：js将其他时区转化为GMT+8时区时间

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：js事件
文章链接：http://soscw.com/index.php/essay/40041.html

亲，登录后才可以留言！