dom事件/bom

Posted on Posted in js
Tips: 本文创建于2014年5月20日,已超过 2 年,内容或图片可能已经失效!

事件

  1. dom1事件设置方式:
  2. dom2 事件设置的方法
  3. 事件流
  4. 事件对象
  5. bom 浏览器对象模型
  • 点击onclick
  • 鼠标一如onmouseover
  • 鼠标移除onmouseout
  • 获得焦点onfocus
  • 时区焦点onblur
  • 双击ondbclick
  • 加载onload

事件设置 dom1 dom2

dom1的弊端
同一个对象的相同类型的事件只能有一个
事件取消没有dom2方便,dom2可以把相同类型的具体事件取消
对事件流(冒泡、捕捉)没有很好的控制

dom1事件设置方式:

  1. <div onclick="事件处理程序----代码"></div>
  2. <div onclick="事件处理程序----函数"></div>
  3. divnode.onclick = function(){}/函数名
  4. divnode['onclick'] = function(){}/函数名

1、3、4中如果有this,代表当前的节点对象
2中如果有this,代表的是window对象

[code lang="js"]
<body>
<div class="apple" id="pear" onclick="alert(this.className)"></div>
<input type="text" id="username" value="zhangsan" onclick="f1()" />
</body>
<script type="text/javascript">
var dv = document.getElementById('pear');
dv.onmouseover = function(){
console.log('hello'+'this.className');
}

function f1(){
console.log(this.alert('1')); // 这里的this代表的是window
}
</script>
[/code]

dom2 事件设置的方法

事件类型:click/mouseover/mouseout(没有on标志)
事件处理: 事件执行的驱动程序
对象.addEventListener(事件类型,事件处理,[事件流]);
取消事件操作:对象.removeEventListener(事件类型,事件处理,[事件流]);
注意:
事件取消参数,要与事件设定的参数完全一致
事件处理必须是有名函数才能取消

[code lang="js"]
// 例子一
<body>
<div class="apple" id="pear" ></div>
<input type="text" id="username" value="zhangsan" />
</body>
<script type="text/javascript">
// dom2
// 同一个对象相同的事件可以绑定若干处理程序
var dv = document.getElementById('pear');
dv.addEventListener('click',function(){console.log('123'+this.id);});
dv.addEventListener('click',function(){console.log('456');});
</script>
/**************************************************************/
// 例子二
<body>
<div class="apple" id="pear" ></div>
<input type="text" id="username" value="zhangsan" />
<input type="button" value="取消" onclick="cancel()"/>
</body>
<script type="text/javascript">
function f1(){
console.log('aiya'+this.id);
}
function f2(){
console.log('a');
}
function f3(){
console.log('b');
}
// dom2
// 同一个对象相同的事件可以绑定若干处理程序
var dv = document.getElementById('pear');
dv.addEventListener('click',f1);
dv.addEventListener('click',f2);
dv.addEventListener('click',f3);
// 取消第二个f2事件
function cancel(){
dv.removeEventListener('click',f2);
}
</script>
[/code]

事件流

许多对象绑定了相同的事件,由于对象彼此有关联,造成一个动作会把全部对象的相关事件都触发执行,这个过程就是事件流
body-onclick
div-onclick
p-onclick
冒泡:先执行P->div->body,从小到大
捕捉:先执行body->div->p,从大到小

主流浏览器:addEventListener/addEventListener
IE浏览器:attachEvent/detachEvent
attachEvent(事件类型,事件处理)
detachEvent(事件类型,事件处理)
IE事件绑定区别,事件类型需要有on标志,不可以指定事件流

[code lang="js"]
<body >
<div class="apple" id="pear" >
<p class="banana"></p>
</div>
<input type="text" id="username" value="zhangsan" />
<input type="button" value="取消" onclick="cancel()"/>
</body>
<script type="text/javascript">
var pp = document.getElementsByTagName('p')[0];
var dv = document.getElementsByTagName('div')[0];

pp.addEventListener("click",function(){console.log("p tag");});
dv.addEventListener("click",function(){console.log("div tag");});
document.body.addEventListener("click",function(){console.log("body tag");});
</script>
[/code]

事件对象

1、事件对象的获取
主流dom方式:对象.onclick=function(evt){}
IE浏览器:对象.onclick=function(){window.event}

[code lang="js"]
<body >
<div class="apple" id="pear" >
<p class="banana"></p>
</div>
</body>
<script type="text/javascript">
var pp = document.getElementsByTagName('p')[0];
var dv = document.getElementsByTagName('div')[0];

pp.onclick = function(evt){
//alert(evt);
//alert(window.event);
// 兼容处理
var evnt = evt?evt:window.event;
alert(evnt);
}
</script>
[/code]

获取鼠标位置,或键盘信息
鼠标位置:
event.clientX/event.clientY,获取在dom中的鼠标坐标(不考虑滚动条)
event.pageX/event.pageY,获取鼠标坐标(包含滚动条)
event.screenX/event.screenY,获取鼠标坐标(整个电脑屏幕)

[code lang="js"]
<body >
<div class="apple" id="pear" >
<p class="banana"></p>
</div>
</body>
<script type="text/javascript">
var pp = document.getElementsByTagName('p')[0];
var dv = document.getElementsByTagName('div')[0];
pp.onclick = function(evt){
//alert(evt);
//alert(window.event);
// 兼容处理
var evnt = evt?evt:window.event;
alert(evnt);
// 获取鼠标相对dom的坐标信息
console.log(evnt.clientX+'--'+evnt.clientY);
console.log(evnt.pageX+'--'+evnt.pageY);
console.log(evnt.screenX+'--'+evnt.screenY);
}
</script>
[/code]

查看键盘被按下哪个键(键盘信息与指定数字有关系ASCII码)
event.keyCode

[code lang="js"]
document.body.onkeydown = function(evt){
var evnt = evt?evt:window.event;
if(evnt.keyCode == 38){
console.log("上");
}else if(evnt.keyCode == 40){
console.log("下");
}else if(evnt.keyCode == 37){
document.write("左");
}else if(evnt.keyCode == 39){
document.write("右");
}
}
[/code]

事件对象阻止事件流

阻止浏览器默认动作

form表单点击时,js进行验证

[code lang="js"]
<form >
<input type="submit" value="注册">
</form>
form.onsubmit = function(){
对表单各个项目做有效性验证
如果验证不合格,浏览器则不要跳转
阻止浏览器默认动作:
return false; event.preventDefault();
event.preventDefault(); DOM标准
event.returnValue=false; IE标准
}
[/code]

加载事件
定义:页面全部的html和css代码都加载到内存之后再执行的js

[code lang="js"]
<script type="text/javascript">
// 加载事件设置,通过window属性onload
/*
window.onload = function (){
var pp = document.getElementsByTagName("p")[0];
console.log(pp.className);
}
*/
window.onload = jiazai; // 没有括号,否则直接就执行了
function jiazai(){
var pp = document.getElementsByTagName("p")[0];
console.log(pp.className);
}
</script>

<style type="text/css">
.apple{width:300px;height:150px;background-color:lightgreen;}
.banana{width:100px;height:80px;background-color:yellow;}
</style>

</head>

<body>
<div class="apple" id="pear" >
<p class="banana"></p>
</div>
</body>
[/code]

bom 浏览器对象模型

浏览器中最大的对象window
window对象内部有许多属性,有属性本身就是对象

[code lang="js"]
<script type="text/javascript">
// url 地址信息
console.log(location.href);
// 通过设置href的信息,达到页面跳转
window.onload = function(){
var it = document.getElementsByTagName('input')[0];
it.onclick = function(){
alert("提示信息");
location.href = "http://liuhonghe.me/";
}
}
</script>
</head>

<body>
<input type="button" value="跳转"/>
</body>
[/code]

[code lang="js"]
// index.html
<script type="text/javascript">
function f1(){
//window.open(新窗口对应的文档路径);
window.open("./indexnew.html","_blank","width=400,height=300");
}
</script>
</head>

<body>
<input type="button" value="打开新窗口" onclick="f1()"/>
</body>
// indexnew.html
<body>
<ul>
<li>北</li>
<li>京</li>
<li>你</li>
<li>好</li>
</ul>
</body>
<script type="text/javascript">
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
// 信息追加到父窗口 opener 获得父窗口的引用
// this.firstChild.nodeValue; // 获得文本内容
// window.opener.document.body // 当前父窗口的body标签
//window.opener.document.body.appendChild(this.firstChild);
window.opener.document.body.innerHTML += this.firstChild.nodeValue;
}
}
</script>
[/code]

» 转载请注明来源:若我若鱼 » dom事件/bom

Leave a Reply

Your email address will not be published. Required fields are marked *

one × 3 =