事件处理函数

javaScript响应用户操作等都是通过事件处理来触发;其基本形式为

event = "javaScript statement(s);"

事件 = "事件处理函数"

function ent(hello)
{
//alert(hello.getAttribute("href"));
var sur = document.getElementById("srt");
sur.setAttribute("src", hello.getAttribute("href"));
}
//alert("hello world!");
//ent();

ent是用户自定义函数;

在html中我们可以通过事件,比如鼠标移动事件来处理函数;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> </head>
<body>
<h1>hello world</h1>
<ul>
<li><a href = "./imges/01.jpg" onmouseover="ent(this); return false;">图片01</a></li>
<li><a href = "./imges/02.jpg" onmouseover="ent(this); return false;">图片02</a></li>
<li><a href = "./imges/03.jpg" onmouseover="ent(this); return false;">图片03</a></li> </ul>
<img id = "srt" src = "./imges/01.jpg" /> <script src = "me.js"></script>
</body>
</html>

通过文本节点改变值

  .childNodes  获得元素的所有子元素以数组存放;firstchild == childNodes[0], lastchild == childNodes[childNodes.length - 1]分别表示元素首尾节点  

.nodeType(此元素属性可返回节点属性值)

  • 1   元素节点
  • 2   属性节点
  • 3   文本节点

文本节点属性.nodeValue (通过此附值本属性以改变文本节点值)

function ent(hello)
{
//alert(hello.getAttribute("href"));
var sur = document.getElementById("srt");
sur.setAttribute("src", hello.getAttribute("href"));
var text = hello.getAttribute("title");
var note = document.getElementById("imgnote");
note.firstChild.nodeValue = text;
}
//alert("hello world!");
//ent();

建立弹出窗口函数

function op(url)

{

  window.open(url);

}

伪协议调用javaScript函数;

  <a href = "javascript:op("http:/....");"></a>

内联事件处理函数

<a href = "#" onclick = "op("http:/....")"> </a>   //#号一般代表指向一个空链接;有的浏览器指向网页头

<a href = ""http:/...."" onclick = "op("http:/....")"> </a> //可防止在禁用javaScript浏览器中打开连接;

事件分离

window.onload = name;

function name()

{

  var temp = getElementById("xxx");

  temp.onmousexxxx = function()

  {

    //事件处理;

    xxxxxxxx;

    xxxxxx;

  }

}

原理解析:

当html页面加载完成会自动调用onload事件;所以第一步让网页加载完成自动调用name()函数

此时name()函数onmousexxxx事件捕获用户事件的发生,当事件发生时,则会触发function()处理消息

事件分离改进版js

onload = even();
function even()
{
  
var ahref = document.getElementsByTagName("a");
for(i = 0; i < ahref.length; i++)

if(ahref[i].className == "imgchange")
{
ahref[i].onmouseover = function(){
ent(this);
return false;
} }

}
function ent(hello)
{
//alert(hello.getAttribute("href"));
var sur = document.getElementById("srt");
sur.setAttribute("src", hello.getAttribute("href"));
var text = hello.getAttribute("title");
var note = document.getElementById("imgnote");
note.childNodes[1].firstChild.nodeValue = text;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> </head>
<body>
<h1>hello world</h1> <ul>
<li><a title = "第一张图片" href = "./imges/01.jpg" class="imgchange">图片01</a></li>
<li><a title = "第二张图片" href = "./imges/02.jpg" class="imgchange">图片02</a></li>
<li><a title = "第三张图片" href = "./imges/03.jpg" class="imgchange">图片03</a></li>
</ul>
<p id = "imgnote">图片说明 <strong>fdswfef</strong>需要</p>
<img id = "srt" src = "./imges/01.jpg" /> <script src = "me.js"></script>
</body>
</html>

代码优化:

if(!document.getElementsByTagName) return false;浏览器支持检测;在使用某方法前,通常需要通过检测某方法是否被浏览器支持;注意的是,检测方法不能有()括号;否则检测的是函数返回值;

尽量少的访问标签元素;

尽量合并多个js文件为一个;

使用代码优化工具,去除不必要的空格注释

改变html结构与内容

innerHTML方法;

<div id = “test”> </div>

window.onload = function(){

var di = document.getElementById("test");

di.innerHTML = "<p> test hello <strong> world </strong> </p>";

}

innerHTML方法的效果是全部插入,无细节可言;对于长篇需要插入的内容实用;

DOM方式:

创建元素对象; var elem = createElement("p");

设置属性(可选)elem.setAttribute(" ", " ");

创建文本节点,添加文本(可选)var text = createTextNode = " 文本内容";

调用对象appendChild()方法。添加节点 p.appendChild("text");//些方法默认添加内容到父元素最后一位(可通过已知元素的parentNode属性获得父元素对象)

insertBefore()方法则可以将节点插入到指定节点前;可配合nextSibling属性获得下一兄弟元素对象;再用insertBefore()插入节点,起到向后插入元素的目的;

对之前项目的改进:

将<img id="srt"> </img>以动态插入的方式加载到html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> </head>
<body>
<h1>hello world</h1> <ul id = "imgchange">
<li><a title = "第一张图片" href = "./imges/01.jpg" >图片01</a></li>
<li><a title = "第二张图片" href = "./imges/02.jpg" >图片02</a></li>
<li><a title = "第三张图片" href = "./imges/03.jpg" >图片03</a></li>
</ul> <script src = "me.js"></script>
</body>
</html>
onload = function () {
pp = document.createElement("p");
var txt = document.createTextNode("");
pp.appendChild(txt);
var im = document.createElement("img");
var bo = document.getElementsByTagName("body")[0];
bo.appendChild(pp);
bo.appendChild(im); var t = document.getElementById("imgchange");
var ahref = t.getElementsByTagName("a");
for (i = 0; i < ahref.length; i++) {
ahref[i].onmouseover = function () {
var text = this.getAttribute("title");
pp.firstChild.nodeValue = text;
im.setAttribute("src", this.getAttribute("href"));
return false;
}
}
}

javaScript改变样式

可以通过element.style.样式  =  新样式;来改变某个元素样式;

通过javaScript改变元素位置信息

element.style.postion = " "

element.style.top =

element.style.left =

javaScript时间控制

var timeout = setTimeout("function",  valu) ; 第一个参数为一个函数,第二个参数为等待时间,以毫秒为记

clearTimeout(timeout);终止某个setTimeout的运行;

javaScript第二篇的更多相关文章

  1. javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式

    - 事件 - 表单提交(掌握) "onsubmit" - 单击事件(掌握) "onclick" - 页面加载成功事件(掌握) "onload" ...

  2. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  3. 《javascript权威指南》读书笔记——第二篇

    <javascript权威指南>读书笔记——第二篇 金刚 javascript js javascript权威指南 今天是今年的196天,分享今天的读书笔记. 第2章 词法结构 2.1 字 ...

  4. 深入理解javascript函数系列第二篇——函数参数

    × 目录 [1]arguments [2]内部属性 [3]函数重载[4]参数传递 前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传 ...

  5. 深入理解javascript作用域系列第二篇——词法作用域和动态作用域

    × 目录 [1]词法 [2]动态 前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极 ...

  6. javascript立即调用的函数表达式N种写法(第二篇)

    原文:javascript立即调用的函数表达式N种写法(第二篇) 上一篇博客我谈到将函数声明转换为函数表达式最常见的一种写法是:通过括号()将匿名函数声明转换为函数表达式即(function(){}) ...

  7. 深入理解javascript作用域系列第二篇

    前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极易出错.这实际上是由两种作用域工作 ...

  8. JavaScript数组方法大全(第二篇)

    数组方法大全(第二篇) 注意:如有错误欢迎指出,如有雷同纯属巧合,本博客参考书籍JavaScript权威指南,有兴趣的小伙伴可以去翻阅一下哦 forEach()方法 遍历数组,里面可以传递一个方法 v ...

  9. 【HANA系列】【第二篇】SAP HANA XS使用JavaScript编程详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列][第二篇]SAP HANA XS ...

随机推荐

  1. Firebase Chat (firebase 实现web聊天室)

    基于firebase + cloud Function 实现web聊天(demo版) 知识点: 使用Firebase SDK创建Google Cloud功能. 触发云功能基于Auth,云存储和Clou ...

  2. mybatis 延迟加载学习

    一.什么是延迟加载 resultMap可实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能. 需求: ...

  3. 版本控制工具SVN学习

    教学视频链接:https://edu.aliyun.com/course/83?spm=5176.10731334.0.0.778e6580zC0Ri0 版本控制工具SVN学习 1,SVN的简介 在实 ...

  4. nested exception is org.apache.ibatis.binding.BindingException

    mybatis出错 xml文件: <update id="decreaseStock"> update item_stock set stock = stock - # ...

  5. nginx 配置反向代理根目录到其他服务器

    location /detail/json { if ( $uri = "/detail/json" ) { rewrite "/detail/json" /i ...

  6. IIS 6.0 PUT上传 任意文件创建漏洞

    IIS 6.0 PUT上传 任意文件创建漏洞 require 1.IIS Server在Web服务扩展中开启了WebDAV. 2.IIS配置了可以写入的权限,包括网站 1.根目录 2.子文件夹 3.i ...

  7. http://www.moext.com博客搬家到这里啦

    1.原博客莫叉特用的是自己的域名http://www.moext.com,由于服务器在国外,访问不太稳定,SEO做得也很不好: 2.喜欢博客园的极简风格,目前来看广告量也在可接受范围: 3.一个偶然的 ...

  8. 币种大写算法(js)

    注意事项:小数精度处理问题,n*10出现精度误差,如1.88*10计算得18.799999999999997,实际想要的数据是18.8: 思路一:小数变成整数(通过字符串处理),计算后,变成小数: 思 ...

  9. MySQL8.x msi版安装教程

    一.下载MySQL 官网下载地址 https://dev.mysql.com/downloads/windows/installer/8.0.html  下载第二个即可(虽然只有32位的 但是会同时安 ...

  10. NB-IOT无线帧结构和下行物理信道

    NB-IOT Downlink OFDM参数 1.下行基于OFDMA, FF点数=128,基带采样速率1.92MHz,子载波间距15kHz,有效带宽180kHz=1PRB OFDMA: 正交频分多址, ...