JavaScript 事件入门知识

JavaScript事件是由访问Web页面的用户引起的一系列操作;
例如:用户点击;当用户执行某些操作的时候,再去执行一系列代码;

一 事件介绍

 事件一般是用于浏览器和用户操作进行交互;最早是IE和Netscape Navigator中出现,作为分担服务器端元算负载的一种手段;
 而DOM2级规范开始尝试以一种符合逻辑的方式标准化DOM事件;
 IE9/Firefox/Opera/Safari和Chrome全部已经实现了"DOM2级事件"模块的核心部分;
 IE8之前浏览器仍然使用其专有事件模型;
 JavaScript有三种事件模型:内联模型/脚本模型和DOM2模型;

二 内联模型(HTML事件处理程序) 

这种模型是最传统的简单的一种处理事件的方法;
在内联模型中,事件处理函数是HTML标签的一个属性,用于处理指定事件;
虽然内联在早期使用较多,但它是和HTML混写的,并没有与HTML分离;

在HTML中把事件处理函数作为属性执行JS代码;
<input type="button" value="按钮" onclick="alert('Lee');" /> 注意单双引号;
在HTML中把事件处理函数作为属性执行JS函数;
<input type="button" value="按钮" onclick="box();" /> 执行JS的函数;
PS:函数不得放到window.onload里面,这样就看不见了; 

三 脚本模型(DOM0级事件处理程序)

 

// 由于内联模型违反了HTML和JavaScript代码层次分离的原则;
// 我们可以在JavaScript中处理事件,这种处理方式就是脚本模型;
  var input = document.getElementsByTagName('input')[0];     // 得到input对象;
  input.onclick = function(){                  // 匿名函数执行;
    alert('Lee');              
  }
  // PS:通过匿名函数,可以直接触发对应的代码;
  //  也可以通过指定的函数名赋值的方式来执行函数(赋值的函数名不要跟括号);
  input.onclick = box;                      // 把匿名函数赋值给事件处理函数;
  input.onclick = null;                     // 删除事件处理程序;

  四 事件处理函数

  // JavaScript可以处理的事件类型为:鼠标事件/键盘事件/HTML事件;
JavaScript事件处理函数及其使用列表
事件处理函数 影响的元素 何时发生
onabort 图像 当图像加载被中断时;
onblur 窗口/框架/所有表单对象 当焦点从对象上移开时;
onchange 输入框/选择框/文本域 当改变一个元素的值且失去焦点时;
onclick 链接/按钮/表单对象/图像等 当用户单击对象时;
ondblclick 链接/按钮/表单对象 当用户双击对象时;
ondragdrop 窗口 当用户将一个对象拖放到浏览器窗口时;
onError 窗口/框架/所有表单对象 当脚本中发生语法错误时;
onfocus 窗口/框架/所有表单对象 当单击鼠标或将鼠标移动聚焦到窗口或框架时;
onkeydown 文档/图像/链接/表单 当按键被按下时;
onkeypress 文档/图像/连接/表单 当按键被按下然后松开时;
onkeyup 文档/图像/链接/表单 当按键被松开时;
onload 主体/框架集/图像 文档或图像加载后;
onunload 主体/框架集 文档或框架集卸载后;
onmouseout 链接 当图标移除链接时;
onmouseover 链接 当鼠标移到链接时;
onmove 窗口 当浏览器窗口移动时;
onreset 表单复位按钮 单击表单的reset按钮;
onresize 窗口 当改变浏览器窗口大小时;
onselect 表单元素 当选择一个表单对象时;
onsubmit 表单 当发送表格到服务器时;
// PS:对于每一个事件,它都有自己的触发范围和方式,事件处理将失效;

1.鼠标事件,页面所有元素都可触发

(1).click:当用户单击鼠标按钮或按下回车键时触发;
    input.onclick = function(){
        alert('Lee');
    };

(2).dblclick:当用户双击鼠标按钮时触发;
    input.ondblclick = function(){
        alert('Lee');
    }

(3).mousedown:当用户按下鼠标还未弹起时触发;
    input.onmousedown = function(){
        alert('Lee');
    }

(4)mouseup:当用户释放鼠标按钮时触发;
    input.onmouseup = function(){
        alert('Lee');
    }

(5).mouseover:当鼠标移到某个元素上方时触发;
    input.onmouseover = function(){
        alert('Lee');
    }

(6).mouseout:当鼠标移出某个元素上方时触发;
    input.onmouseout = function(){
        alert('Lee');
    }

(7).mousemove:当鼠标指针在元素上移动时触发;
    input.onmousemove = function(){
        alert('Lee');
    }

2.键盘事件

 (1).keydown:当用户按下键盘上任意键触发,如果按住不放,会重复触发;
    onkeydown = function(){
        alert('Lee');
    }

(2).keypress:当用户按下键盘上的字符键触发,如果按住不放,会重复触发;
    onkeypress = function(){
        alert('Lee');
    }

(3).keyup:当用户释放键盘上的键触发;
    onkeyup = function(){
        alert('Lee');
    }

3.HTML事件

(1).load:当页面完全加载后(包括所有图像/JavaScript文件/CSS文件等外部资源),就会触发window上面的load事件;
window.onload = function(){
alert('Lee');
}

// 图像上面也可以触发load事件,无论是在DOM中的图像元素还是HTML中的图像元素;
// 因此可以在HTML中为任何图像指定onload事件处理程序;
<img src='smile.client.gif' onload="alert('Image loaded.')" >
// PS:新图像元素不一定是从添加到文档后才开始下载,只要设置src属性就会开始下载;

// <script>元素也会触发load事件,以便开发人员确定动态加载的JavaScript文件是否加载完毕;
// 与图像不同,只有在设置了<script>元素的src属性并将该元素添加到文档后,才会开始下载JavaScript文件;

 (2).unload:当文档被完全卸载后触发;
 // 只要用户从一个页面切换到另一个页面,就会发生unload事件;
 // 而利用这个事件最多的情况是清除引用,以避免内存泄漏;
     window.onunload = function(){
         alert('Lee');
     }
(3).select:当用户选择文本框(input或textarea)内容改变且失去焦点后触发;
     input.onselect = function(){
         alert('Lee');
     }
(4).change:当文本框(input或textarea)内容改变且失去焦点后触发;
     input.onchange = function(){
         alert('Lee');
     }
(5).focus:当页面或元素获得焦点时在window及相关元素上面触发;这个事件不会冒泡;
     input.onfocus = function(){
         alert('Lee');
     }
(6).blur:当页面或元素失去焦点时在window及相关元素上触发;这个事件不会冒泡;
     input.onblur = function(){
         alert('Lee');
     }
(7).submit:当用户点击提交按钮在<form>元素上触发;
     form.onsubmit = function(){
         alert('Lee');
     }

(8).reset:当用户点击重置按钮在<form>元素上触发;
    form.onreset = function(){
        alert('Lee');
    }

(9).resize:当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件;

// 这个事件在window(窗口)上触发;浏览器窗口最大化或最小化也会触发resize事件;
// IE/Safari/Chrome和Opera会在浏览器变化时不断触发resize事件;
// Firefox则只会在用户停止调整窗口大小时才会触发resize事件;
    window.onresize = function(){
        alert('Lee');
    }

(10).scroll:当用户滚动滚动条的元素使触发;
    window.onscroll = function(){
        alert('Lee');
    }

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
幸运的是,jQuery提供了一个内置的实用函数,$getScript()为我们提供了这样的方法。来实现在网页动态的功能。来看看这个函数的语法: $.getScript(url,callback) 获取url参数所指定的脚本,使用一个GET请求到指定的服务器 Parameters URL()获取脚本文件的URL。 callback (Function)可选函数 调用脚本文件加载后里面的函数 具体实现过程是 从资源加载文本 |如果字符串成功 返回XHR实例,用来获取脚本。 如何使用呢看下面的方法 我们创建一个n
最简单粗暴的方式就是加载网络资源,JS文件或者图片文件。 复制代码 代码如下: script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/script typeof window.jQuery === "undefined" // return false or ture 用jQuery变量来检测是否联网 function doConnectFunction() { return true;}function doNo
jquery.gridrotator是一款非常实用的响应式图片展示画廊插件。这款图片展示画廊插件将图片像网格一样排列,然后随机将某个格子中的图片翻转显示另一张图片。共有6种效果。 HTML结构: HTML结构非常简单。 div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow" ul lia href=#> 调用插件 $(function() { $( '#ri-grid' ).gridrotator();}); 注意别忘了引入jQuery和jque
javascript是一个基于对象和事件驱动,并且具有安全性的脚本语言,应用很广泛,不仅仅是网页,不要被jsp给困住。 基于对象,就是不需要指定变量的类型,你给他一个3,它知道是整型,如果给赋值'3',它就知道是char。 事件驱动,就是单击啊,之类的事件进行驱动。 javascript优点:网页互动性强,简单易用。js主要是基于客户端运行,很大程度上减少了服务器的负荷。 javascript是脚本编程语言:采用程序段方式实现,与HTML结合,java的编译器其实就是浏览器本身。 安全性:HTML页面中不能
简介 在这个例子中,我引用了包括AngularJS在内的一些JavaScript库,实现了一个很简单的名片生成器。 尽管在这个小应用中,AngularJS库相较于其他JavaScript库来说做的事不多,然而,这个小而强大的AngularJS却是该应用的全部灵感之源。 背景 在该应用中,我们需要做些简单工作。首先,我们需要用CSS设计名片。然后,我们需要让用户实时的输入和编辑数据,这个地方AngularJS就不可或缺了。再然后,我们需要将名片的HTML div容器转化为canvas画布,并以PNG图片形式
1.js 复制代码 代码如下: script type="text/javascript" function openwindow(url,name,iWidth,iHeight) { // url 转向网页的地址 // name 网页名称,可为空 // iWidth 弹出窗口的宽度 // iHeight 弹出窗口的高度 //window.screen.height获得屏幕的高,window.screen.width获得屏幕的宽 var iTop = (window.screen.height-30-iH
复制代码 代码如下: script type="text/javascript" src="${ctx}/js/jquery.form.js"/script script type="text/javascript" //创建测试实例 function createInstance() { var options = { success : function(json) { if (json.succ) { alert(json.info); window.parent.ymPrompt.doHandle
本文实例讲述了jQuery实现文本框输入同步的方法。分享给大家供大家参考。具体如下: 这段jquery代码可以保持一个文本框输入的同时另外一个文本框与之同步 var $inputs = $(".example-input");$inputs.keyup(function() { $inputs.val($(this).val());}); 希望本文所述对大家的jQuery程序设计有所帮助。
在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而大受Web designer欢迎。所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果。在这是jQuery滑动切换插件系列的第二篇,我们将向大家分享40多种非常有用,又有创意的jQuery图
Javascript是一种解释性语言,而并非编译性,它不能编译成二进制文件。 理解动态执行与闭包的概念 动态执行:javascript提供eval()函数,用于动态解释一段文本,并在当前上下文环境中执行。 首先我们需要理解的是eval()方法它有全局闭包和当前函数的闭包,比如如下代码,大家认为会输出什么呢? var i = 100;function myFunc() { var i = 'test'; eval('i = "hello."');}myFunc();alert(i); // 100 首先我们