Dart学习笔记(11):Dart和Web技术(Event Management)

发表于2018-07-04 18:13 阅读(50)


突然感觉异步与并发的那个例子有点超前了
很多点也是近几章慢慢完善的

本文地址:http://www.cndartlang.com/743.html

不过不得不说
那个例子涉及到很多知识点
也费了很大精力

特别是最后一个并发Isolate

好了,之前的不说了

上一篇中已经说了如何查找、修改、新建、删除DOM元素
这里讲一下DOM元素和事件如何相互作用

关键点为
添加事件处理的语法:element.on[‘event’].listen

// 监听输入框的KeyUp Event
input.onKeyUp.listen((KeyboardEvent e) {
    print(e.keyCode);
});

很容易是不是?
HTML元素有许多我们可以使用的事件

onAbort
onBeforeCopy
onBeforeCut
onBeforePaste
onBlur
onChange
onClick
onContextMenu
onCopy
onCut
onDoubleClick
onDrag
onDragEnd
onDragEnter
onDragLeave
onDragOver
onDragStart
onDrop
onError
onFocus
onInput
onInvalid
onKeyDown
onKeyPress
onKeyUp
onLoad
onMouseDown
onMouseEnter
onMouseLeave
onMouseMove
onMouseOut
onMouseOver
onMouseUp
onMouseWheel
onPaste
onReset
onScroll
onSearch
onSelect
onSelectStart
onSubmit
onTouchCancel
onTouchEnd
onTouchEnter
onTouchLeave
onTouchMove
onTouchStart
onTransitionEnd
onFullscreenChange
onFullscreenError

listen()函数返回的是StreamSubscription
可以调用pause、resume、cancel函数暂停、重新开始、取消监听

下面是一个使用了onKeyUp和onClick事件监听处理的例子

main.html

<!DOCTYPE html>

<html>
  <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Note 11</title>
    
    <script type="application/dart" src="main.dart"></script>
    <script src="packages/browser/dart.js"></script>
    
    <link rel="stylesheet" href="main.css">
  </head>

  <body>   
    <h1>Note 11</h1>
    
    <p>Hello world from Dart!</p>
    
    <div id="sample_container_id">
      <p id="sample_text_id">Click me!</p>
    </div>
    
  </body>
</html>

main.css

.terminal {
  border:1px solid #cecece;
  line-height: 1em;
  font-size:13px;

  width: 100%;
  height:210px;
  background:#ddd;
  padding:10px;
  color: green;
  overflow-y:scroll;
}

main.dart

import 'dart:html';
import 'dart:math' as Math;

void main() {
  // 不同使用querySelector的方法,这里是常见的用法
  var body = document.querySelector('body');
  print(body.innerHtml);
  
  //Element中的querySelector函数表示仅在该Element中查找
  var h1 = body.querySelector('h1');
  var p = body.querySelector('p');
  var sc = body.querySelector('#sample_container_id');
  var sp = sc.querySelector('#sample_text_id');
  
  // 改变 h1 text
  h1.text = 'Integrating Dart and HTML';
  // 改变 p text
  p.text = 'This is an example of using DOM elements from DART';
  // 清空 #sample_text_id 的文本
  sp.text = '';
  
  // 新建一个输入框
  var input = new InputElement()
    ..id = 'autocomplete'
    ..name = 'autocomplete'
    ..type = 'text'
    ..placeholder = 'Type to search'
    ..width = 40;
  
//新建“搜索”按钮
  var btnSearch = new ButtonElement()
    ..id = 'btn_search'
    ..name = 'btn_search'
    ..text = '搜索!';
  
//新建“清空”按钮
  var btnClear = new ButtonElement()
    ..id = 'btn_clear'
    ..name = 'btn_clear'
    ..text = '清空';
  
//新建“打开/关闭事件监听”按钮
  var btnEvents = new ButtonElement()
    ..id = 'btnEvents'
    ..name = 'btnEvents'
    ..text = '事件监听 Off';
  
  var br = new BRElement();
  
//新建显示结果Div
  var display = new DivElement()
    ..id = 'display'
    ..classes = ['terminal'];
  
  // 添加事件处理程序
  var ss_keyup = input.onKeyUp.listen((KeyboardEvent e) {
    var keyCode = e.keyCode;
    showText(display, 'KeyCode: ${keyCode}');
    if(keyCode == KeyCode.ENTER) {
      btnSearch.click();
    }
    
    if(keyCode == KeyCode.ESC) {
      btnClear.click();
    }
  });
  
  var ss_cs = btnSearch.onClick.listen((e) {
    if(input.value.trim() == '') {
      showText(display, 'Nothing to search !');
    } else {
      showText(display, 'Searching: ${input.value.toString()} ...');
    }
  });
  
  var ss_cc = btnClear.onClick.listen((e) {
    input.value = '';
    display.nodes.clear();
  });
  
  // On/Off 事件监听.
  btnEvents.onClick.listen((e) {
    if(btnEvents.text.toLowerCase().contains('off')) {
      btnEvents.text = '事件监听 On';
      ss_keyup.pause();
      ss_cs.pause();
      ss_cc.pause();
    } else {
      btnEvents.text = '事件监听 Off';
      ss_keyup.resume();
      ss_cs.resume();
      ss_cc.resume();
    }
  });
  
  // 将新建的Element添加到DOM中
  sp.nodes.addAll([ input, btnSearch, btnClear, btnEvents, br, display]);
}

showText(display, value) {
  // 在display DIV中添加ParagraphElement
  display.nodes.add(new ParagraphElement()..text=value);
  
  //移动display DIV的滚动条到最下方
  var scrollHeight = Math.max(display.scrollHeight, window.innerHeight);
  display.scrollTop = scrollHeight - display.clientHeight;
}

当运行程序后,输入框和按钮的事件监听程序会被激活
可以通过“事件监听 Off”来暂停所有的监听事件
如果你点击“事件监听 On”按钮,将恢复所有事件处理程序

运行结果: