JavaScript 事件的一些重要说明

1,JavaScript异步回调

复制代码 代码如下:


<script language="javascript">
//注册回调函数loaded到处理函数window.onload上
window.onload = loaded;
//把方法window.alert地址传递给show函数
var show = window.alert;
function loaded(){
show("success");
}
</script>


2,事件对象
  下面的js实现当在textarea文本框里面键入回车时,并不导致换行。即禁用回车键

复制代码 代码如下:


<textarea ></textarea>
<script language = "javascript">
/*
事件的对象的棘手部分在于,IE的实现与W3C的规范有查表。IE使用一个独立的全局事件对象(它可以再全局变量属性window.event中找到),而其他浏览器则使用独立的包含事件对象的参数传递。
*/
document.getElementsByTagName("textarea")[0].onkeypress = function(e)
{
//如果不存在事件对象,则获取全局的(仅IE)的对象
var e = e || window.event;
//如果敲击了回车键,返回false(使它不发生任何行为)
return e.keyCode != 13;
}
</script>


3,this关键字
  浏览器会把this关键字等同于引用该函数(含有this关键字的函数)的当前元素

复制代码 代码如下:


<body>
<div id = "body">
<ul class = "links">
<li>
<a href = "https://www.jb51.net/">Home</a>
</li>
<li>
<a href = "./">mappath</a>
</li>
<li>
<a href = "../">parentpath</a>
</li>
</ul>
</div>
</body>
<script language = "javascript">
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++)
{
li[i].onclick = handeClick;
}
function handeClick()
{
this.style.backgroundColor = "blue";
this.style.color = "red";
}
</script>


4,取消事件冒泡
  通常当你对子元素作样式作修改,或者触发事件,根据冒泡原理,其父元素也会作相同改变,为防止这类事情发生,需要做取消事件冒泡的处理。
  下面实例展示了鼠标会为其悬停的当前元素加上红色的边框。如果不阻止事件冒泡的话,每次把鼠标移到一个元素上时,该元素及其父元素都会有红色的边框,这是我们不希望看到的。

复制代码 代码如下:


<body>
<div id = "body">
<ul class = "links">
<li>
<a href = "https://www.jb51.net/">Home</a>
</li>
<li>
<a href = "./">mappath</a>
</li>
<li>
<a href = "../">parentpath</a>
</li>
</ul>
</div>
</body>
<script language="javascript">
//阻止冒泡的通用函数
function stopBubble(e)
{
if (e && e.stopPropagation)
//w3c方法
e.stopPropagation();
else
//ie方法
window.event.cancelBubble = true;
}
var li = document.getElementsByTagName("*");
for (var i = 0; i < li.length; i++)
{
//监听用户鼠标,当移动到元素上时,为元素加上红色边框
li[i].onmouseover = function(e)
{
this.style.border = "1px solid red";
stopBubble(e);
}
//检查用户鼠标,当移开元素时,删除我们加上的边框
li[i].onmouseout = function(e)
{
this.style.border = "0px";
stopBubble(e);
}
}
</script>


5,重载浏览器的默认行为
  浏览器都有这种默认的行为,即当我们在<a>标签上点击的时候会链接到href属性的地址上,有的时候我们并不希望这种事情发生,而想实现我们自己的效果,比如弹出警告框,示例如下。

复制代码 代码如下:


<a href = "https://www.jb51.net">重载浏览器的默认行为</a>
<script language = "javascript">
/*
为了达到同<a href = "#" onclick = function(){alert("success");}>content</a>相同效果
*/
function stopDefault(e)
{
//W3C防止浏览器默认行为
if (e && e.preventDefault)
e.preventDefault();
//IE防止浏览器默认行为
else
window.event.returnValue = false;
return false;
}
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++)
{
a[i].onclick = function(e)
{
alert("我已经修改了浏览器的默认行为了");
return stopDefault(e);
//好像直接写下面一句也可以
//return false;
}
}
</script>


6,事件的亲和力(accessibility,又称可访问性)
  为了使得自己的网站更有亲和力,可以这样考虑,当我们把鼠标放在一个元素上或者通过键盘的tab键访问时,其样式应该保持一致,如下代码

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjyzfj.html